Web Components Library

Responsive Embed

CSS styles to make an iframe responsive, including a media query to change aspect ratio on smaller devices.

Works with any iframe element inside a div with the styling class. (Google Maps, Youtube iframes, etc.)

  • Handle: @responsive-embed
  • Preview:
  • Filesystem Path: components/02-components/responsive-embed/responsive-embed.hbs 
<style>
    .responsive-embed {
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }

    @media (max-width: 600px) {
        .responsive-embed {
            padding-bottom: 80%;
        }
    }

    .responsive-embed iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
</style>

<div class="responsive-embed">

    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d28952.98082237465!2d-112.80388665362551!3d49.68490284892524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1608351012801!5m2!1sen!2sca" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

</div>
 
<style>
  .responsive-embed {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
  }

  @media (max-width: 600px) {
    .responsive-embed {
      padding-bottom: 80%;
    }
  }
  .responsive-embed iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
</style>

<div class="responsive-embed">

  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d28952.98082237465!2d-112.80388665362551!3d49.68490284892524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1608351012801!5m2!1sen!2sca"
          width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
          tabindex="0"></iframe>

</div>
 
/* No context defined. */