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.