Responsive

Items that are manually embedded can have different aspect ratios. Bootstrap provides classes for the most common ratios. Custom ratios are beyond the scope of this guide.

Note

Do not use these on embedded H5P interactives. H5P uses it's own script and classes to keep embedded interactives at the correct ratio.

21:9 aspect ratio

HTML

<div class="ratio ratio-21x9">
    <iframe src="..."></iframe>
</div>

16:9 aspect ratio

HTML

<div class="ratio ratio-16x9">
    <iframe src="..."></iframe>
</div>

4:3 aspect ratio

HTML

<div class="ratio ratio-4x3">
    <iframe src="..."></iframe>
</div>

1:1 aspect ratio

HTML

<div class="ratio ratio-1x1">
    <iframe src="..."></iframe>
</div>