<figure class="embed-responsive embed-responsive--16by9">
    <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ywgPDSbQzPE?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</figure>
<figure class="embed-responsive embed-responsive--16by9">
    <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ywgPDSbQzPE?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</figure>
/* No context defined for this component. */
  • Content:
    // Credit: Nicolas Gallagher and SUIT CSS.
    
    .embed-responsive {
      display: block;
      position: relative;
      padding: 0;
      width: 100%;
      overflow: hidden;
    
      &::before {
        display: block;
        content: '';
      }
    
      .embed-responsive-item,
      iframe,
      embed,
      object,
      video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        border: 0;
        width: 100%;
        height: 100%;
      }
    }
    
    .embed-responsive--21by9 {
      &::before {
        padding-top: percentage(9 / 21);
      }
    }
    
    .embed-responsive--16by9 {
      &::before {
        padding-top: percentage(9 / 16);
      }
    }
    
    .embed-responsive--4by3 {
      &::before {
        padding-top: percentage(3 / 4);
      }
    }
    
    .embed-responsive--1by1 {
      &::before {
        padding-top: percentage(1 / 1);
      }
    }
    
  • URL: /components/raw/embed-responsive/_embed-responsive.scss
  • Filesystem Path: components/01-atoms/media/embed-responsive/_embed-responsive.scss
  • Size: 731 Bytes
  • Handle: @embed-responsive
  • Preview:
  • Filesystem Path: components/01-atoms/media/embed-responsive/embed-responsive.html

There are no notes for this item.