Embed Video
Ratio Video 16:9
Wrap any embed in<iframe> tag, in a parent element, use ratio-16x9 class to set aspect ratio 16:9.
HTML Preview
<!-- Ratio Video 16:9 -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/1y_kfWUCFDQ" title="YouTube video" allowfullscreen></iframe>
</div>
Ratio Video 4:3
Use ratio-4x3 class to set aspect ratio 4:3.
HTML Preview
<!-- Ratio Video 4:3 -->
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/1y_kfWUCFDQ" title="YouTube video" allowfullscreen></iframe>
</div>Custom Ratios
Use --tb-aspect-ratio: 50% to style element to set aspect ratio 2:1.
HTML Preview
<!-- Custom Ratio Video -->
<div class="ratio" style="--tb-aspect-ratio: 50%;">
<iframe src="https://www.youtube.com/embed/2RZQN_ko0iU" title="YouTube video" allowfullscreen></iframe>
</div>Ratio Video 21:9
Use ratio-21x9 class to set aspect ratio 21:9.
HTML Preview
<!-- Ratio Video 21:9 -->
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/Z-fV2lGKnnU" title="YouTube video" allowfullscreen></iframe>
</div>Ratio Video 1:1
Use ratio-1x1 class to set aspect ratio 1:1.
HTML Preview
<!-- Ratio Video 1:1 -->
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/GfSZtaoc5bw" title="YouTube video" allowfullscreen></iframe>
</div>