How to avoid a video showing black bands

If the element selected for our video has a proportion (width/height ratio) quite different from our video, YouTube and Vimeo may show black bands around our video in order to maintain the aspect ratio when displaying the video, as in:

To avoid this effect, we need to look for a location on our page that matches the video proportions. Depending on our video proportions, a home page banner or slideshow may be adequate.

The ideal placement is a responsive element that has the same proportions of our video and adapts its size to the different screen sizes.

If we're confident with HTML and CSS, we can create such a container ourselves with the following HTML snippet:

<div id="responsive-video-container"></div>

and the following CSS rule:

#responsive-video-container {     padding-bottom: 56.25%; }

where 56.25% is the ratio between the height and width of the video (56.25% is the right value for a 16:9 video).

Alternatively, within the app's scope, you can try to adjust the vertical padding (it will do a small zoom on the video in order to hide those black bars). You can adjust some Vertical offset or Horizontal offset to the video. You will find these options on the Video preferences page, under the 'Advanced preferences' section:

As you can see above, in this case, by adjusting only the 'Vertical adjustment' we'll get rid of the black bands, as these were shown only on the top and bottom of the video.

In the case that we have the black bands on both sides (right and left of the video) we'll have to adjust the 'Horizontal adjustment'.

This is how it will look after the above-mentioned adjustments are applied:

NOTE: You can also try a negative adjustment. E.g.-50 px

Also, please consider uploading a video to Youtube with the right resolution and ratio (The standard aspect ratio for YouTube on a computer is 16:9) to avoid the black bars. You may want to check this forum for more details: Video resolution & aspect ratios. For Vimeo uploads, please refer to Choosing an orientation for your video for further instructions on aspect ratio settings.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us