How to make iframes responsive

Nov 13

Every now and again you stumble on a blog post that you want to shout about....in fact if you could, you might run up to the author and hug them. Today was one of those days. 

As web developers we have a love hate relationship with iframes. They are one of "those" tags in HTML that you have to use height and width for. And when you're building a responsive site that makes life tricky because it means using jQuery or some other method of making them responsive. Today I thought I'd have a look around and see if there was any nice methods of solving this problem came across this simple solution:

Step 1 - wrap your iframe in a containing div like this:

  1. <div class="responsive-iframe"><iframe></iframe></div>

Step 2 - add this simple CSS to your style sheet:

  1. .responsive-iframe {
  2. position: relative;
  3. padding-bottom: 56.25%;
  4. padding-top: 35px;
  5. height: 0;
  6. overflow: hidden;
  7. }
  8.  
  9. .responsive-iframe iframe {
  10. position: absolute;
  11. top:0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. }

And that's it! - there you have responsive iframe,. If you want to know more about this then I recommend you read the original blog post which has various other examples.

Tags: 
html
css
tips

Recent Comments

Browse by date

Join us on Facebook