Question

When embeding an HD video from youtube using the generated iframe, I notice that two black sidebars are added to the player when I use the preset.

<iframe width="853" height="480" src="http://www.youtube...

For excample in; http://www.villagedurable.org/tv if I insert the iframe with dimensions 640*360 or use the HD size 1280×720 the two sidebars desappear allowing beautiful layout.

It’s true that both 640*360 and 1280×720 use an aspect ration of 1.777777777777778, multiplying 480 by 1.777777777777778 gives 853.3333333333333 which, i think makes youtube add this nasty black bars 🙁

Answer 1

After much fuss I finally found the solution.

Apparently because 853×480 is not exactly the same ratio as 16/9, the player doesn’t have controls that automatically fade away. So the video controls will take up 30 pixels of your wide, leaving it only 450 pixels height. To keep the aspect ratio, video is shrunk and hence the black borders (or black sidebars, whatever you call them).

The solution is to use 853×510 as dimensions in your iframe:

<iframe width="853" height="510" ... />

IMHO, this is a bug on YouTube’s end, since they offer 853×480 as a preset resolution in the ’embed code’ selection.

From http://www.h3xed.com/web-and-internet/embedding-youtube-videos-in-hd:

Of the four resolution options YouTube shows you on the embed dialog
(for 16 x 9 videos), 853 x 480 is the only one that doesn’t load in
the player with the fade-away controls. This is because 16 x 9 does
not go into 853 x 480 evenly. So you’ll notice that there will be
black bars on the sides of the 16 x 9 video. To actually play an 853 x
480 video in an embedded YouTube player, you’ll want to choose 853 x
510 as the width and height in the embed code.