How-to Make an iframe Responsive Using HTML Code

Sometimes you need to embed another website into the site you are using and a typical way of doing this is by using an <iframe>. However for modern websites, typically an iframe is not responsive. By using the code below, you can still embed an iframe into your site and make it responsive.

<style type="text/css">
  /*
	<![CDATA[*/
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

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

  /*]]>*/
</style>
<div class="embed-container">
  <iframe src="https://INSERT-YOUR-URL-HERE" style="border:0"></iframe>
</div>

Here is the same code, minified:

<style type="text/css">.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}.embed-container embed,.embed-container iframe,.embed-container object{position:absolute;top:0;left:0;width:100%;height:100%}</style><div class="embed-container"><iframe src="https://INSERT-YOUR-URL-HERE" style="border:0"></iframe></div>

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top