Responsive Iframe

by bluebillywig_support

HTML

<div class="content">

  <h2>Responsive Iframe Example</h2>
  <p>Responsive styling applied to iframe and its parent element (class: video-wrapper-iframe). Change the size of the browser window to see the player scale accordingly.</p>

  <div class="video-wrapper">
    <iframe onload="this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)" src="https://yourcompanyname.bbvms.com/p/default/c/4354721.html?inheritDimensions=true" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowFullscreen oallowFullscreen msallowFullscreen allowfullscreen allow="autoplay; fullscreen"></iframe>
  </div>

  <p>
    Source:
    <a href="https://www.benmarshall.me/responsive-iframes/" target="_blank">Ben Marshall: Responsive Iframes</a>
  </p>

</div>

CSS

/* Iframe & wrapper styling */
.video-wrapper {
  position: relative;
  overflow: hidden;

  padding-top: 56.25%; /* 16:9 aspect ratio */

  /* Apply different 'padding-top' values for other aspect ratios */
  /* padding-top: 42.85%;  */ /* 21:9  aspect ratio */
  /* padding-top: 75%;     */ /*  4:3  aspect ratio */
  /* padding-top: 100%;    */ /*  1:1  aspect ratio */
  /* padding-top: 66.67%;  */ /*  3:2  aspect ratio */
  /* padding-top: 177.78%; */ /*  9:16 aspect ratio */
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
}

/* Non essential CSS for simple example page styling:*/

h2,
p {
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
  padding: 20px;
  font-family: arial;
}

.content {
  max-width: 800px;
  margin: 0 auto;
}