<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. */
  • Content:
    @use 'sass:math';
    
    // Credit: Nicolas Gallagher and SUIT CSS.
    
    .embed-responsive {
      position: relative;
    
      overflow: hidden;
      display: block;
    
      width: 100%;
      padding: 0;
    
      &::before {
        content: '';
        display: block;
      }
    
      .embed-responsive-item,
      iframe,
      embed,
      object,
      video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    
        width: 100%;
        height: 100%;
    
        border: 0;
      }
    }
    
    .embed-responsive--21by9 {
      &::before {
        padding-top: math.percentage(calc(9 / 21));
      }
    }
    
    .embed-responsive--16by9 {
      &::before {
        padding-top: math.percentage(calc(9 / 16));
      }
    }
    
    .embed-responsive--4by3 {
      &::before {
        padding-top: math.percentage(calc(3 / 4));
      }
    }
    
    .embed-responsive--1by1 {
      &::before {
        padding-top: math.percentage(calc(1 / 1));
      }
    }
    
  • URL: /components/raw/embed-responsive/_embed-responsive.scss
  • Filesystem Path: components/05-atoms/media/embed-responsive/_embed-responsive.scss
  • Size: 798 Bytes
  • Handle: @embed-responsive
  • Preview:
  • Filesystem Path: components/05-atoms/media/embed-responsive/embed-responsive.html

No notes defined.