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 may show black bands around our video, as in:

To avoid this effect, we will look for a location in 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, you can adjust add some Vertical padding or Horizontal padding to the video. You will find these options on the app preferences page, under the 'Optional preferences' section:

As you can see above, on this case, by adjusting only the 'Vertical padding' we'll get rid of the black bands, as these were shown only on 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 padding'.

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