CODEWITHSUNDEEP
htmlcssinternet-exploreryoutubeembed
Gregory Bolkenstijn
Gregory Bolkenstijn

Reputation: 10201

Youtube HTML5 iframe embed has outline in IE on play

I have a Youtube HTML iframe embed in my page, this is the code:

<iframe src="http://www.youtube.com/embed/gI2eO_mNM88?rel=0&amp;autohide=1&amp;color=white&amp;showinfo=0&amp;theme=dark&amp;wmode=transparent&amp;hd=1" width="470" height="264" frameborder="0" allowfullscreen webkitAllowFullScreen></iframe>

If I press play I get an dotted 1px outline in IE9+8. I have this in my CSS:

embed,
object {
  outline: 0;
  overflow: hidden
}

But that doesn't seem to help. It doesn't get an outline in Chrome or FF (both latest versions). I also tried putting the iframe in a div with the same dimensions as the iframe and giving that div overflow: hidden, but no luck either.

Upvotes: 0

Views: 2172

Answers (4)

ceasar
ceasar

Reputation: 1522

I just posted this problem at the youtube dev forum. Hope they can solve this from their site

https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/gqt_G5d8HYM%5B1-25%5D

Upvotes: 0

keaukraine
keaukraine

Reputation: 5364

I've created a fiddle for this case: http://jsfiddle.net/keaukraine/UmTZy/

As you can see, outline appears inside iframe element. You cannot affect styling of elements inside iframe since it is beyond scope of your web page.

A rather ugly solution is to place iframe the way it hides 1px of it's outline. I've placed it inside slightly smaller div and positioned it so it hides this outline. If this solution is OK for you, you can see it in this fiddle: http://jsfiddle.net/raQEH/

Upvotes: 1

Rob
Rob

Reputation: 15160

Try border:0; if outline didn't work.

Upvotes: 0

ygssoni
ygssoni

Reputation: 7349

Give your iframe an id="iframe" and try this :

#iframe:active, #iframe:focus {
   border: none;
   outline: none;
}

Upvotes: 0

Related Questions