Search code examples
wordpressyoutubeembedded-videoborderless

YouTube Black Borders

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:

enter image description here

Does anyone know why that is happening?

Thanks in advance!

ty

Solution

  • 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.