Responsive iframes

Ben Marshall

Thanks to a 2014 article by Ben Marshall, you can do responsive iframes. Check this out at different resolutions:

And here's the code:

<style> 
/* https://benmarshall.me/responsive-iframes/ */ 
.intrinsic-container { 
  position: relative; 
  height: 0; 
  overflow: hidden; 
} 
  
/* 16x9 Aspect Ratio */ 
.intrinsic-container-16x9 { 
  padding-bottom: 56.25%; 
} 
  
/* 4x3 Aspect Ratio */ 
.intrinsic-container-4x3 { 
  padding-bottom: 75%; 
} 
  
.intrinsic-container iframe { 
  position: absolute; 
  top:0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
} 
</style> 
<div class="intrinsic-container intrinsic-container-16x9"> 
  <iframe src="//www.youtube.com/embed/sT9YXB3Fvns" allowfullscreen></iframe> 
</div>

Back to top