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>
© Toner.
Design & Develop by Themesbrand