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
title="Youtube: Thank you veterans"
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
title="Youtube: Thank you veterans"
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
title="Youtube: Thank you veterans"
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
title="Youtube: Thank you veterans"
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>