Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.
To make sure embedded content maintains its aspect ratio as the width of the screen changes, wrap the
video in a container with the
<div class="responsive-embed"> <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe> </div>
Add ratio classes to change the aspect ratio of responsive embeds. The default ratio is 4:3. The
.widescreen class will change the container's aspect ratio to 16:9.
<div class="responsive-embed widescreen"> <iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc" frameborder="0" allowfullscreen></iframe> </div>
The ratio classes are generated by the keys in the
$responsive-embed-ratios map in your settings file. Only the
default key is required. You can, for example, make your default ratio 16:9, remove widescreen, and add other aspect ratios.
$responsive-embed-ratios: ( default: 16 by 9, vertical: 9 by 16, panorama: 256 by 81, square: 1 by 1, );
<div class="responsive-embed panorama"> <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe> </div>
The default styles of this component can be customized using these Sass variables in your project's settings file.
Margin below a responsive embed container.
Aspect ratios used to determine padding-bottom of responsive embed containers.
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
Creates a responsive embed container.
||String or List||
Ratio of the container. Can be a key from the