<p><strong>Embeds</strong></p>

<p>Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.</p>

<p><strong>About</strong></p>

<p>Rules are directly applied to &lt;iframe>, &lt;embed>, &lt;video>, and &lt;object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.</p>

<p><strong>Pro-Tip!</strong> You don’t need to include frameborder="0" in your &lt;iframe>s as we override that for you.</p>

<p><strong>Example</strong></p>

<p>Wrap any embed like an &lt;iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.</p>

<div class="mdl-example">
    <div class="container">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
        </div>
    </div>
<pre>
&lt;div class="embed-responsive embed-responsive-16by9">
    &lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen>&lt;/iframe>
&lt;/div>
</pre>
</div>

<p><strong>Aspect ratios</strong></p>

<p>Aspect ratios can be customized with modifier classes.</p>

<pre>
&lt;!-- 21:9 aspect ratio -->
&lt;div class="embed-responsive embed-responsive-21by9">
    &lt;iframe class="embed-responsive-item" src="...">&lt;/iframe>
&lt;/div>
    
&lt;!-- 16:9 aspect ratio -->
&lt;div class="embed-responsive embed-responsive-16by9">
    &lt;iframe class="embed-responsive-item" src="...">&lt;/iframe>
&lt;/div>

&lt;!-- 4:3 aspect ratio -->
&lt;div class="embed-responsive embed-responsive-4by3">
    &lt;iframe class="embed-responsive-item" src="...">&lt;/iframe>
&lt;/div>

&lt;!-- 1:1 aspect ratio -->
&lt;div class="embed-responsive embed-responsive-1by1">
    &lt;iframe class="embed-responsive-item" src="...">&lt;/iframe>
&lt;/div>
</pre>

// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;

  &::before {
    display: block;
    content: "";
  }

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);

  .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
    &::before {
      padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
    }
  }
}