# Embed Responsive

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/media/embed-responsive/embed-responsive.html

No notes defined.