In this article we’ll dive into the ‘fitmode’ settings.
As part of the Playout configurations, the fitmode settings determine how your video fits in the player when the aspect ratio of the video content differs from the player’s aspect ratio.
If you are looking to alter the size of the actual player and how it fits into your website/app then take a look at this article explaining player dimensions.
The aspect ratio ratio of an object refers to the width in relation to its height. Both video files and players have an aspect ratio. For example: a video file with a width and height of 1920x1080px has a 16:9 aspect ratio and a player with a width and height of 300x300px has a 1:1 aspect ratio.
Common aspect ratios used to show online video are 21:9, 16:9, 4:3, 1:1, 3:2, 21:9, 9:16.
Consider the following example: a player might have its dimensions set to an aspect ratio of 21:9, but is expected to play a 16:9 video file. A common (but not the only) way for a player to deal with this is to leave empty space (black bars) around the video content:
Although the Smart fitmode is selected by default, you can choose any of the fitmodes outlined below:
1.0 | Smart (recommended)
Use Smart” fitmode to fill up the player as optimally as possible. Smart fitmode is recommended in most cases. Complex calculations are used to determine how much undetectable stretching can be applied and/or how much undetectable amount of video content can be left out of view. Right before the point where this does become noticeable to the viewer, the player will apply “letterboxing” or “pillarboxing”.
“Letterboxing” refers to leaving empty spaces above and below the video content.
“Pillarboxing” refers to leaving empty spaces on both sides of the video content (left and right).
Example 1:
A minimum amount of stretch and a minimum amount of video content is left out of view on both sides. Here the difference in aspect ratios is small, resulting in a player fully filled by the video content.
Example 2:
Here the difference in aspect ratios is more significant, but a minimum amount of stretching is applied to reduce the empty space on both sides of the video content.
Example 3:
Here the difference in aspect ratios is also significant, but a minimum amount of video content is left out of view on the left and right side to minimize the empty space on the top and bottom.
2.0 | Fit both
Use the “Fit both” mode to either fill the full width or the full height of the player without stretching or leaving out minimal parts of the video content.
This setting is often recommended for displaying interactive videos as it avoids stretching interactive elements (e.g buttons) or cutting off (small) parts of interactive elements that are placed at the edges of the video.
Example 1:
Example 2:
3.0 | Fit vertical
Please remember that altering the fitmode does not alter the size of the player that is embedded on the web page or in the app. The “Fit Vertical” fitmode is used to fit the video into the full height of the player. This means that when the aspect ratio of the video does not match the aspect ratio of the playout, this will either result in empty spaces on the left and right (pillarboxing) or in parts of the video to be left out of view on the left and right to make sure the full height of the player is covered.
Example 1:
Example 2:
4.0 | Fit horizontal
Please remember that altering the fitmode does not alter the size of the player that is embedded on the web page or in the app. The “Fit horizontal” fitmode is used to fit the video into the full width of the player. This means that when the aspect ratio of the video does not match the aspect ratio of the playout, this will either result in empty spaces above and below the video content (letterboxing) or in parts of the video to be left out of view (above and below) to ensure the full width of the player is covered.
Example 1:
Example 2:
5.0 | Cover (overscan)
Use the “Cover” fitmode to always “cover” the full width as well as the full height of the player. No stretching is applied, but instead parts of the video (left/right or top/bottom) will be left out of view.
Example 1:
Example 2:
6.0 | Stretch
Use the “Stretch” fitmode to fill the full width as well as the full height of the player by stretching the video horizontally and/or vertically. No parts of the video will be left out of view.
Example 1:
Example 2:
7.0 | Native
Use the “Native” fitmode to display your video content in its exact dimensions (i.e. its actual resolution). With this setting the video content will neither be resized nor stretched. This fitmode is only used in rare occasions.
Example 1:
Video content with dimensions smaller than the player will cause the background of the player to be visible:
Example 2:
Video content with dimensions larger than the player will cause parts of the video to be out of view:
