6.4 utility.responsive-video Responsive video
Using a wrapper div, embedded videos can be made responsive so that their
intrinsic aspect ratio is preserved at any screen width. The
responsive-video__embed class is optional if the embed is an iframe.
Examples
Default styling
.responsive-video--4-3
A video with a 4:3 aspect ratio instead of the default 16:9 one.
Markup: utility/responsive-video/responsive-video.twig
<div class="responsive-video {{modifier_class}}">
<iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
</div>
Source:
utility/responsive-video/_responsive-video.scss, line 1