Web Style Guide: Video

HTML: Responsive Video

Format your video iframe code for responsive device handling.

Video: 16x9 Aspect Ratio (Default)

CSS Class: video-embed
<div class="video-embed">
    <iframe 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen="" 
        frameborder="0" 
        height="315" 
        src="https://www.youtube.com/embed/tydINCfow7I" 
        width="560">
    </iframe>
</div>

Video: 21x9 Aspect Ratio

CSS Class: video-embed video-embed-21by9
<div class="video-embed video-embed-21by9">
    <iframe 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen="" 
        frameborder="0" 
        height="315" 
        src="https://www.youtube.com/embed/tydINCfow7I" 
        width="560">
    </iframe>
</div>

Video: 4x3 Aspect Ratio

CSS Class: video-embed video-embed-4by3
<div class="video-embed video-embed-4by3">
    <iframe 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen="" 
        frameborder="0" 
        height="315" 
        src="https://www.youtube.com/embed/tydINCfow7I" 
        width="560">
    </iframe>
</div>

Video: 1x1 Aspect Ratio

CSS Class: video-embed video-embed-1by1
<div class="video-embed video-embed-1by1">
    <iframe 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen="" 
        frameborder="0" 
        height="315" 
        src="https://www.youtube.com/embed/tydINCfow7I" 
        width="560">
    </iframe>
</div>

Design, Tools & Training


Top