W3Schools YouTube <iframe> method has padding in IE

[L.Adlon]

Hi. I'm using the W3Schools suggested YouTube <iframe> embedding method, and it works great in Firefox, but when viewed in Internet Explorer, it seems the video is about 2 pixels smaller horizontally and vertically, resulting in a thin padding on the bottom and right of the video (between it and the <div> frame.

 

Anyone have any idea what might be happening here? The <div> frame seems to be the same size between the Firefox and IE version, and it's the video itself that has the size difference.

 

I have the following style applied to the <iframe> of the video:

 

.reel { text-align:center; margin:20 auto; padding:0px; border-style:double; border-width:6px; line-height:0px;}

 

From what I see (and understand) there isn't anything there that should be affecting the video size or the padding (aside from making the padding zero). Also, it SEEMS that the white padding is in the video block itself, as opposed to in the padding area between the video element and the <div> frame surrounding it, as changing the background-color of the <iframe> does not change the color of the white padding.

 

Any theories and/or suggestions?

Edited June 24, 2014 by L.Adlon

[dsonesuk]

IE or youtube adds 8px margin on right and bottom edge for some reason.

[L.Adlon]

Oh, so it's a known/common thing, then?

 

Do website guys do anything to remove that, or do they just shrug it off and leave it?

 

Definitely looks like it's part of the video itself, and not the padding of the element. Put side by side, the video viewed in IE is a few pixels smaller than one in Firefox.

[dsonesuk]

its the youtube page it is in, so you can't access that to set margin: 0;, if you use embed tag to show movie, you don't have this problem.

[L.Adlon]

But is the embed tag currently fully supported by all (major) platforms and browsers, or is there still the need for the <object><embed> combo?