Embeds
Perfect for responsively handling video or slideshow embeds based on the width of the parent.
Youtube
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>
Vimeo
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>
Soundcloud
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>
Ratio
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 |