How to embed a video on Youtube of Vimeo without getting black bands

· Blog · ,

What’s the story with the black bands?

We’ve been getting some questions around black bands appearing on web videos so we though it might be helpful put the solution on the ol’ HWP Blog. Sometimes when you embed an video, you’ll notice those black bands on the top and bottom, or sometimes on left and right:  

What’s going on here?

You can embed in any size you like, provided your aspect ratio is 1.77:1 or what they call in 16:9 in video production lingo. The aspect ratio is the ratio between the width and the height of a video. If you get the ratio wrong, you’re trying to force stretching the video in real time. Most machines and servers can’t handle that, so websites like Youtube will ‘letterbox’ or ‘pillar box’ your video, which are the black bands you see.

Calculating your ratio

When I was a kid my teacher banged on about how important it is to being able to do maths in your head, but I never saw the point because I had a Solar Powered Calculator.  Who needs brains when you have one of those? Of course, now I’m a proper adult and have children of my own.. I still think it’s a waste of time: Just punch in the height or width you want in the Aspect Ratio calculator, et voila: correct aspect ratio:  

How to change how the video displays

The default embed code plays the video at 560×315 but you can tweak the embed code and change the size yourself. This is the standard embed code from Youtube you get when you click the Share>Embed button under the video: Screen Shot 2014-03-06 at 7.20.51 pm Add the embed code to your page in ‘text’ or ‘html’ mode, depending on what platform you work in and simply adjust the values of ‘width’ or ‘height’: <iframe width=”560″ height=”315″ src=”//” frameborder=”0″ allowfullscreen></iframe>