Sizing and Aspect Ratio

Your video has a set size – the dimensions of the actual footage shot/edited. The video container, however, can have widely different dimensions depending on the the device, screen size and where it’s displayed. We have several methods in order to tackle the wide range resulting from the combination of video and viewport sizes. These are



Pan’n’scan works by cropping the video content by using the larger of its dimensions, and panning to see a portion of the original video, designated the Center of Action. This enables an optimal full-frame-video viewing experience regardless of the viewport size at the expense of losing some video information in the cropped areas.

Since videos can be embedded in containers with any aspect ratio you can define the limit of the cropping. When reaching the limit the player will fallback to boxing. The following example sets the limit to 50% for both the width and the height:

let player = new InterludePlayer('#playerContainer', {
    scaling: 'panAndScan',
    panAndScanMinVisibleWidth: 0.5,
    panAndScanMinVisibleHeight: 0.5

The cropping relates to the Center of Action (coa). By default the coa is centered on the middle of the video. You can change it:

let player = new InterludePlayer('#playerContainer', {
    scaling: 'panAndScan',
    PanAndScanScaler: {
        coaXPercent: 0.5, 
        coaYPercent: 0.5

See Player’s Options for more details.



Letterboxing defines horizontal black bars above and below the video, when the aspect ratio of the video is larger than that of its container. If the aspect ratio of the video is smaller than that of the container, you get pillarboxing – vertical bars to the left and to the right of the video. Using letterboxing/pillarboxing ensures that no part of your video is obscured, at the expense of possibly smaller viewing area.

To enable letterboxing/pillarboxing mode, set the scaling property to 'boxing' in the Player’s Options:

let player = new InterludePlayer('#playerContainer', {
    scaling: 'boxing'
Rate this page: X
Tell us more!