CSS Utility Classes Embed

Create responsive video embeds by keeping the aspect ratio based on the parent element width.

Basic Example

Embed styles are directly applied to <iframe>, <embed>, <video>, and <object> elements.

<template>
    <div class="_embed:16:9!">
        <iframe src="https://www.youtube.com/embed/_oIDt3dRgro" allowfullscreen />
    </div>
</template>

Aspect Ratios

Aspect ratios can be customized with embed helper classes. The following aspect ratio classes are available:

<!-- 21:9 aspect ratio -->
<div class="_embed:21:9">
    <iframe src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="_embed:16:9">
    <iframe src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="_embed:4:3">
    <iframe src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="_embed:1:1">
    <iframe src="..."></iframe>
</div>