How to change how a video should fit inside a container on Web

You may want to alter how a video is sized inside the player's frame. By default, a video player respects the aspect ratio of the video. This means that black bars can appear on the sides of the player, or above and below the video, when its aspect ratio differs from the player's aspect ratio.

Instead, you may want the video to cover the entire player. Note that this either

• cuts off the content that falls outside of the player, or
• deforms the content, so it no longer matches its original aspect ratio.

Implementation

The CSS object-fit property serves this use-case.

.theoplayer-skin video {
  object-fit: contain; /* default */
  /* object-fit: cover; // content outside of the container, hence some content might be missing from the container */
  /* object-fit: fill; // all content inside of the container, but the content might be deformed to be fitted inside of it */
}

/*
// if you are doing object-fit: cover, and you don't want to show the content outside of the container, then do:
.theoplayer-skin {
    overflow-y: hidden;
}
// additionally, the object-position CSS property can help position the content, e.g.
.theoplayer-skin video {
    object-position: top;
}
*/

Alternatively, if you cannot use CSS for some reason, you could try to achieve the same through JavaScript.

const videos = document.querySelectorAll('.theoplayer-skin video');
for (let i = 0; i < videos.length; i++) {
  videos[i].style.objectFit = 'cover';
}