4.15 components.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: components/responsive-video/responsive-video.twig
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"responsive-video </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"responsive-video__embed"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"560"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"315"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.youtube.com/embed/8N_tupPBtWQ"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</span>
Source:
components/responsive-video/_responsive-video.scss, line 1