Foehn Design System

Video 

<div class="ratio ratio-16x9 mb-3">
    <iframe class="ratio-item" src="https://www.youtube.com/embed/ZDf5hRFwg6w"></iframe>
</div>
 
<div class="ratio ratio-16x9 mb-3">
  <iframe class="ratio-item" src="{{ src }}"></iframe>
</div>
 
{
  "src": "https://www.youtube.com/embed/ZDf5hRFwg6w"
}

Aspect ratios can be customized with modifier classes.

<!-- 21:9 aspect ratio -->
<div class="ratio ratio-21by9">
  <iframe class="ratio-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
  <iframe class="ratio-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="ratio ratio-4by3">
  <iframe class="ratio-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="ratio ratio-1by1">
  <iframe class="ratio-item" src="..."></iframe>
</div>