Skip to main content

Aspect Ratios / Resizing

The StoryFile player expands to fill its parent container, whether it's a div element or a full-page layout. If the container's aspect ratio is different from the video, padding is automatically added to fill the space. By default, this padding is black, but it can be customized using the bg query parameter. Subtitles will automatically adjust to fill the full width of the player, ensuring legibility.

Controlling Aspect Ratio with div Containers​

Using a div element to control the size and aspect ratio of an iframe provides greater flexibility in managing the layout. The div can be styled with CSS to maintain consistent dimensions, ensuring the iframe content displays correctly across different screen sizes and orientations. Example:

<div class="iframe-container">
    <iframe src="https://example.com" frameborder="0" allowfullscreen></iframe>
</div>

Maintain Aspect Ratio​

One of the main advantages is the ability to maintain a specific aspect ratio for the iframe. By using CSS properties such as padding-top or padding-bottom on the div, you can create a responsive aspect ratio box that scales proportionally with the width of the container. This is especially useful for video content or interactive media that needs to preserve its aspect ratio to avoid distortion.

HTML:

<div class="iframe-container">
    <iframe src="https://example.com" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.iframe-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

This method ensures that the iframe maintains a specific aspect ratio (16:9 in this example) while scaling proportionally to the container's width. This approach prevents video distortion and keeps the layout consistent.