YouTube Black Borders

Question

I have a 16:9 video (1280 × 720 Actual), that I've uploaded to YouTube, and embedded into a WP page, using the HTML5 player embed:

<iframe width="395" height="222" src="//www.youtube.com/embed/XOcDLExisBg?autohide=1&modestbranding=1&showinfo=0&rel=0" frameborder="0"  allowfullscreen></iframe>

My embed dimensions are also 16:9 (calculated by YouTube, and verified manually).

When the video plays on the page, I have black borders around three sides:

Does anyone know why that is happening?

Thanks in advance!

ty

Answer 1

The autohide=1 parameter causes the player bar to scroll offscreen when it's not being used, but the space is still there reserved for it, it does not resize the video to take over the space it was sitting in. Thus, the black bar area at the bottom is for the hidden player bar, and the side space is for the reduced size of the video.

You either need to take the player bar into account, or stop using autohide=1.

Answer 2

I see no way to respond within the rules - sorry - but the answer provided does not account for the fact that this is an issue only viewable in Chrome and that has only been occurring for around 10 days. It is a bug also displayed on Youtube's own pages when viewing Channel Trailers - this is a bug in either Chrome or Youtube. I have reported it with full screenshots and notes to Google.

If you use the following code (no autohide) you will see that the controls autohide anyway, and do not produce the black bar bug. However, the controls are visible on load so it is not as clean a look in terms of a 'poster' but the playback is perfect.

<iframe width="640" height="360" src="//www.youtube.com/embed/YOUTUBE_VIDEO_ID?rel=0&showinfo=0&theme=light&color=white" frameborder="0" ></iframe>

Has to be a bug - this behaviour was not happening just over a week ago.

Answer 3

I have been so frantic with the iframe codes that I didn't check the others.

This works:

<embed width="640" height="360" wmode="window" allowfullscreen="true" 

type="application/x-shockwave-flash" 

src="http://www.youtube.com/v/YOUTUBE_VIDEO_ID&showsearch=0&fs=1&autohide=1&showinf

o=0&rel=0&autoplay=0&theme=light&color=white&amp;ap=%2526fmt

%3D22"></embed>

So, it's a Youtube/Chrome bug that is only affecting iframe embeds. There may be some stuff in that code you/we don't need - but it works 100% and I'm not spending another second on it!

Answer 4

Changing autohide=1 to autohide=0 is doing the job for me. I have no idea why this is working, but for me the player bar is hidden like before. The good thing is, it works on Chrome AND all the other browsers.

I think this bug is from YouTube itself. We might need to change everything back to autohide=1 once they fix it. You still need to change everything, but like you guys mentioned, if you need to fix it because of clients getting annoyed, this could be a short term fix.

Hope it helps!