How to change how a video should be fit inside of a container

This question is asked by developers who want to alter how a video should be sized inside the video's frame. By default, a video player respects the aspect ratio the video.

• For example, due to size of the container/frame, black pillars are appearing on the sides of the container. Instead, you want your video to cover these black pillars, even though this
• Cuts out content outside of the box.
• Or deforms the content, and causing misalignment with the aspect-ratio.

Table of Contents

• SDKs
• Code example

SDKs

Code example

The snippets below help you understand how you could attempt to implement this use case.

Web SDK

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";
}

Android (TV) SDK

The Web SDK code above should be included in your Android (TV) project if you are using our minApi16 or minApi21 SDK. If you are using any other Android SDK (e.g. Unified SDK), you currently cannot achieve this use case.

The article at How to add CSS or JavaScript files to an Android/iOS project explains how you can add CSS and JavaScript files to your project. The sample project at How to insert a button demonstrates this.

iOS (tvOS) SDK

You can use the API described at https://docs.theoplayer.com/api-reference/ios/Protocols/Fullscreen_Objc.html#/c:@M@THEOplayerSDK@objc(pl)THEOplayerFullscreen(im)setAspectRatioWithAspectRatio to set the video gravity values.

The snippet below demonstrates how you could use this API:

theoplayer.fullscreen.setAspectRatio(aspectRatio: AspectRatio.fill)