Perfect for responsively handling video or slideshow embeds based on the width of the parent.
Wrap Youtube <iframe>
in a parent element with .embed-responsive
and an aspect ratio.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Wrap Vimeo <iframe>
in a parent element with .embed-responsive
and an aspect ratio.
<div class="ratio ratio-16x9">
<iframe src="https://player.vimeo.com/video/76979871?autoplay=0" allowfullscreen></iframe>
</div>
Wrap Soundcloud <iframe>
in a parent element with .embed-responsive
and an aspect ratio.
<div class="ratio ratio-21x9">
<iframe height="300" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/41395010&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div>
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Class | Values |
---|---|
class="ratio ratio-[value]" |
21x9 / 16x9 / 4x3 / 1x1 |