Responsive iFrames

index.html

<div class="wrapper">
  <h1>Check me out, I'm a <a href="https://benmarshall.me/responsive-iframes/">responsive iframe</a>!</h1>
  <p>Resize me in your browser or pull me up in different size screen to see the magic of the <a href="https://benmarshall.me/resize-videos-proportionally-intrinsic-ratios/">intrinsic ratio technique</a>.</p>
  <div class="iframe-container">
    <iframe src="https://benmarshall.me/" frameborder="0"></iframe>
  </div>
</div>

responsive-iframes.markdown

Responsive iFrames

A Pen by Uriel Wilson Jr. on CodePen.

License.

style.scss

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

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

// Demo styles
body {
  background: url('https://benmarshall.me/wp-content/uploads/2018/08/background.gif');
  font-family: 'Lora', serif;
  font-size: 16px;
  line-height: 1.3;
  margin: 1rem 0;
  text-align: center;
}

h1,
p {
  margin-bottom: 2rem;
}

h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.7rem;
}

a {
  color: #31c1ef;
  text-decoration: none;
}

.wrapper {
  background-color: #fff;
  border-radius: 1rem;
  margin: 0 auto;
  max-width: 1020px;
  padding: 2rem;
  width: 100%;
}

styles

<link href="https://fonts.googleapis.com/css?family=Lora|Poppins:600,700" rel="stylesheet" />