185

I was reading Can You Make an iFrame Responsive?, and one of the comments/answers led me to this JSFiddle.

But when I tried to implement the HTML and CSS to fit my needs, I didn't have the same results/success. I created my own JSFiddle so I could show you how it doesn't work the same for me. I'm sure it has something to do with the type of iFrame I'm using (e.g., the product images might need to be responsive too or something?)

My main concern is that when my blog readers visit my blog on their iPhone, I don't want everything to be at x width (100% for all my content) and then the iFrame misbehaves and is the only element wider (and hence sticks out past all the other content - if that makes sense?)

Does anyone know why it's not working?

Here is the HTML & CSS of my JSFiddle (if you don't want to click on the link):

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
  </div>
</div>

2
  • 7
    The iframe itself ('the box') can be responsive. But everything inside the iframe is a separate page, and therefore not in the domain of your CSS nor JS.
    – DA.
    Commented Jul 25, 2013 at 20:12
  • you could use easyXDM for communication between the page where i-frame is embedded and the document on server the iframe is pointing to.
    – john Smith
    Commented Dec 18, 2013 at 18:00

24 Answers 24

158

I present to you The Incredible Singing Cat solution =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
As you move the window bar, you'll see iframe to responsively resize


Alternatively, you may also use the intrinsic ratio technique

  • This is just an alternate option of the same solution above (tomato, tomato)

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

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
5
  • 4
    Seealso this article explaining this technique in more detail: smashingmagazine.com/2014/02/… Commented Dec 22, 2015 at 9:48
  • only works for youtube iframes. See this: jsfiddle.net/1bd8qw76
    – csandreas1
    Commented May 23, 2018 at 8:36
  • 2
    This technique will work for all iframes, the trick is, the content in the iframe will need to be responsive as well, more on this here: benmarshall.me/responsive-iframes Commented Aug 17, 2018 at 16:53
  • 1
    Thanks I have tried it With CodePen, JdFiddle and Youtube's Embed They Work as I Wanted Thanks!
    – Aditya
    Commented Aug 17, 2021 at 15:56
  • @comrade-dev the singing cat or iframe =) lol
    – Omar
    Commented Aug 29, 2021 at 16:47
74

Try using this code to make it responsive

iframe, object, embed {
    max-width: 100%;
}
1
  • 48
    You are not adjusting the height of the container with this code.
    – reggie
    Commented Jun 9, 2015 at 8:25
46

I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:

.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/ 
  border: solid black 1px;
}

.myIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="myIframe">
  <iframe> </iframe>
</div>

4
  • 2
    future note for me if content padding-bottom is ratio of content width, 800x600 is %75, 800x536 is %67
    – nerkn
    Commented Jul 17, 2014 at 8:06
  • 1
    This is a good starting point to making iframes scroll for sarafi and all devices. very sad though....
    – klewis
    Commented Feb 26, 2015 at 21:43
  • This is exactly what i needed to allow the iframe to scroll, as it was over 5000px long. The other codes forced the long iFrame to be overlaid the below content.
    – penmas
    Commented Sep 21, 2017 at 18:44
  • 1
    for 16:9, padding-bottom should be 56.25% Commented Nov 8, 2017 at 7:12
18

You can use this tricks mentioned on this site http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php.

Its very useful and easy to understand. All you need to create

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Here is your edited js fiddle for demonstration.

15

iframes cannot be responsive. You can make the iframe container responsive but not the content it is displaying since it is a webpage that has its own set height and width.

The example fiddle link works because it's displaying an embedded youtube video link that does not have a size declared.

2
  • 1
    This is misleading. The example fiddle link works as well when youtube iframe width and height are specified.
    – Philip007
    Commented Aug 22, 2013 at 19:54
  • 26
    I'm disappointed this is so harshly downvoted. The message he is conveying is important; that iFrames are dangerous to make responsive because you're at the whim of the source's responsiveness. Yes, Youtube is the exception. But his point is still valid. Commented Mar 31, 2015 at 4:28
13

iFrames CAN be FULLY responsive while keeping their aspect ratio with a little CSS technique called the Intrinsic Ratio Technique. I wrote a blog post addressing this question specifically: https://benmarshall.me/responsive-iframes/

This gist is:

.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%;
}
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

BOOM, fully responsive!

4
  • I jus checked your site, and the solution therein, its working like a treat!
    – Irf
    Commented Apr 23, 2022 at 0:41
  • and thanks for the reponsive iframe Generator, I could check the solution therein handy.. Thanx..
    – Irf
    Commented Apr 23, 2022 at 0:42
  • "This video has been removed for violating YouTube's Terms of Service" - you need a new video link :)
    – Tony
    Commented Jan 31, 2023 at 11:06
  • It's useful in some specific situations, but a hard-coded aspect ratio isn't what most people think of what you say "responsive".
    – DBS
    Commented Aug 27 at 15:52
12
iframe{
  max-width: 100% !important;
}
0
12

Check out this solution. It works for me

https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    html body {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
      overflow: hidden;
      font-family: arial;
      font-size: 10px;
      color: #6e6e6e;
      background-color: #000;
    }
    
    #preview-frame {
      width: 100%;
      background-color: #fff;
    }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    var calcHeight = function() {
      $('#preview-frame').height($(window).height());
    }

    $(document).ready(function() {
      calcHeight();
    });

    $(window).resize(function() {
      calcHeight();
    }).load(function() {
      calcHeight();
    });
  </script>
</head>

<body>
  <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
  </iframe>
</body>

</html>

2
  • I've updated your fiddle since there were some wrong pieces here and there. It's the same,and it works the same but without confusing bits. jsfiddle.net/6NSX3/263 Commented Aug 6, 2015 at 14:39
  • IOS does not calculate height correctly, it takes navigation bar into account. Also Iframe on IOS is not scrollable. Commented Mar 15, 2016 at 15:16
6

DA is right. In your own fiddle, the iframe is indeed responsive. You can verify that in firebug by checking iframe box-sizing. But some elements inside that iframe is not responsive, so they "stick out" when window size is small. For example, div#products-post-wrapper's width is 8800px.

6

Simple, with CSS:

iframe{
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16/9;
}

In action:

iframe {
  width: 100%;
  max-width: 800px; /*this can be anything you wish, to show, as default size*/
  aspect-ratio: 16/9; /*important to keep the aspect ratio*/
}
<iframe src="https://www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>

aspect-ratio is supported by all major browsers, check on caniuse.com

Please, note that the content inside the iframe also has to be responsive!

3
  • 1
    this is simple and awesome Commented Jul 17, 2018 at 9:59
  • this doesn't maintain aspect ratio as the iframe resizes, ie the height stays the same no matter what the width is.
    – ryan
    Commented Jun 12, 2019 at 20:06
  • By taking into consideration what @ryan said, I've updated my answer.
    – iorgu
    Commented Nov 30, 2023 at 22:35
3

I noticed that leowebdev's post did seem to work on my end, however, it did knock out two elements of the site that I am trying to make: the scrolling and the footer.

The scrolling I got back by adding a scrolling="yes" To the iframe embed code.

I am not sure if the footer is automatically knocked out because of the responsiveness or not, but hopefully someone else knows that answer.

2

Remove iframe height and width specified in pixels and use percentage

iframe{  max-width: 100%;}
1
  • 1
    But, it didn't make inside content responsive. Commented Jul 8, 2016 at 8:24
2
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
1

it solved me by adjusting code from @Connor Cushion Mulhall by

iframe, object, embed {
  width: 100%;
  display: block !important;
}

1

If you happen to be using the Bootstrap CSS library, you can use the responsive embed classes that it provides:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Several different aspect ratios are supported, see the documentation.

0

With the following markup:

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

The following CSS makes the video full-width and 16:9:

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
0

I am search more about this topic and finally get a nice answer. You can try like this:

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>

0

The best solution to make an "iframe" responsive and fit with all device screens , simply apply this code (working great with Games sites):

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

If you're looking for a responsive games container fit with all devices apply this code which uses advanced CSS @media queries.

3
  • Hello there, The Iframe html code is simple just looks like this:
    – Mizo Games
    Commented Dec 4, 2016 at 11:12
  • <div class="iframe"> <iframe src=""></iframe> </div>
    – Mizo Games
    Commented Dec 4, 2016 at 11:13
  • Actually i use it with my website: Al3abMizo Games , and you can try it by playing any game at any device what ever the screen size.
    – Mizo Games
    Commented Dec 4, 2016 at 18:44
0

Fully responsive iFrame for situations where aspect ratio is unknown and content in the iFrame is fully responsive.

None of the above solutions worked for my need, which was to create a fully responsive iFrame that had fully responsive dynamic content inside of it. Maintaining any kind of aspect ratio was not an option.

  1. Get height of your navigation bar and any content ABOVE or BELOW the iFrame. In my case I only needed to subtract the top navbar and I wanted the iFrame to fill all the way down to the bottom of the screen.

Code:

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

I also created a timeout so that on resize the function wouldn't get called a million times.

0

The code below will make the fixed width content of a non-responsive website within an iframe resize to the viewport width, only if its width is larger than the viewport width. For demo purposes the website is a single image 800 pixels wide. You can test by resizing your browser window or load the page in your phone:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
iframe {width: 100%; transform-origin: left top;}
.imgbox{text-align:center;display:block;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>   
<script>
jQuery(document).ready(function($){
    nsZoomZoom(); 
    $(window).resize(function(){ 
        nsZoomZoom();
    });
    function nsZoomZoom(){
        htmlWidth = $('html').innerWidth();
        iframeWidth = 800;
        if (htmlWidth > iframeWidth)
            scale = 1;
        else {
            scale = htmlWidth / (iframeWidth); 
        }
        $("iframe").css('transform', 'scale(' + scale + ')');
        $("iframe").css('width', '800');
    } 
}); 
</script>
</head>
<body>
<div class=imgbox>
    <iframe src="http://placekitten.com/g/800/600" scrolling=no width=800 height=600 frameborder=no></iframe>
</div>
</body>
0

If you are using bootstrap 4 then just use utility class for embed

https://getbootstrap.com/docs/4.5/utilities/embed/

Example:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Xh3j915ZnCo?rel=0" allowfullscreen></iframe>
</div>
0

For Example:

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS

.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%;
}
0

I had to show iframe in square so thats what i used

.video-wrapper {
  position: relative;
  padding-bottom: 100%;
}
.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}
0

Check out this full code. you can use the containers in percentages like below code:

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.