Home/ Questions/Q 8382151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T16:51:58+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0