/* ==========================================================================
Responsive Embed Credit: Nicolas Gallagher and SUIT CSS. <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> ========================================================================== */
.embed-responsive {
display: block; position: relative; width: 100%; margin-bottom: 1.5rem; padding: 0; overflow: hidden; &::before { display: block; content: ''; } .embed-responsive-item, iframe, embed, object, video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
}
.embed-responsive-21by9 {
&::before { padding-top: percentage(9 / 21); }
}
.embed-responsive-16by9 {
&::before { padding-top: percentage(9 / 16); }
}
.embed-responsive-4by3 {
&::before { padding-top: percentage(3 / 4); }
}
.embed-responsive-1by1 {
&::before { padding-top: percentage(1 / 1); }
}