responsive embed component for tailwindcss, based on bootstrap's responsive embed which is itself credited to Nicolas Gallagher and SUIT CSS. This will add the .embed-responsive and .embed-responsive-item components to your css.
This plugin relies on webdna/tailwindcss-aspect-ratio to create the aspect ratio utility classes.
# Install via npm
npm install --save-dev tailwindcss-responsive-embedResponsive embed classes won't do much by themselves, so require tailwindcss-aspect-ratio also. It shouldn't matter what order they are included.
require("tailwindcss-responsive-embed")();
require("tailwindcss-aspect-ratio")({
ratios: {
square: [1, 1],
"16/9": [16, 9],
"4/3": [4, 3],
"21/9": [21, 9]
}
});This configuration would create the following classes:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
}
.aspect-ratio-square {
padding-top: 100%;
}
.aspect-ratio-16/9 {
padding-top: 56.25%;
}
.aspect-ratio-4/3 {
padding-top: 75%;
}
.aspect-ratio-21/9 {
padding-top: 42.86%;
}<div class="embed-responsive aspect-ratio-4/3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/J---aiyznGQ"></iframe>
</div>