I was reading this stackoverflow post titled "Can you make an iFrame responsive?", and one of the comments/answers led me to this jfiddle.
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 JS fiddle 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??)
Anyway, does anyone know why it's not working? thank you.
here is the HTML & CSS of MY JSFIDDLE (if you don't want to click on the link):
<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>
and here is the accompanying CSS:
.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%;
}
This question is related to
css
iframe
responsive-design
Remove iframe height and width specified in pixels and use percentage
iframe{ max-width: 100%;}
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.
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.
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%;
position: relative;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100%;
height: 100%;
}
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>
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;
}
}
check out this solution... 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>
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.
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.
Try using this code to make it responsive
iframe, object, embed {
max-width: 100%;
}
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.
This solution worked for me. And I found it easier. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/
<div class="wrap>
<iframe src="../path"></iframe>
</div>
.wrap {
overflow: auto;
}
iframe, object, embed {
min-height: 100%;
min-width: 100%;
overflow: auto;
}
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.
Simple, with CSS:
iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}
Please, note: But it won't make the content inside it responsive!
2nd EDIT:: There are two types of responsive iframes, depending on their inner content:
one that is when the inside of the iframe only contains a video or an image or many vertically positioned, for which the above two-rows of CSS code is almost completely enough, and the aspect ratio has meaning...
and the other is the:
contact/registration form type of content, where not the aspect ratio do we have to keep, but to prevent the scrollbar from appearing, and the content under-flowing the container. On mobile you don't see the scrollbar, you just scroll until you see the content (of the iframe). Of course you give it at least some kind of height, to make the content height adapt to the vertical space occurring on a narrower screen - with media queries, like, for example:
@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
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%;
}
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.
iframe{
max-width: 100% !important;
}
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 {_x000D_
position: relative;_x000D_
height: 0;_x000D_
overflow: hidden;_x000D_
}_x000D_
_x000D_
_x000D_
/* 16x9 Aspect Ratio */_x000D_
_x000D_
.intrinsic-container-16x9 {_x000D_
padding-bottom: 56.25%;_x000D_
}_x000D_
_x000D_
_x000D_
/* 4x3 Aspect Ratio */_x000D_
_x000D_
.intrinsic-container-4x3 {_x000D_
padding-bottom: 75%;_x000D_
}_x000D_
_x000D_
.intrinsic-container iframe {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}<div class="intrinsic-container intrinsic-container-16x9">_x000D_
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>_x000D_
</div>BOOM, fully responsive!
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>
Check out this demo Page.
I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:
// HTML
<div class="myIframe">
<iframe> </iframe>
</div>
// CSS
.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%;
}
it solved me by adjusting code from @Connor Cushion Mulhall by
iframe, object, embed {_x000D_
width: 100%;_x000D_
display: block !important;_x000D_
}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
<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>
.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%;
}
Here is your edited js fiddle for demonstration.
I am search more about this topic and finally get a nice answer. You can try like this:
.wrapper {_x000D_
width: 50%;_x000D_
}_x000D_
.container {_x000D_
height: 0;_x000D_
width: 100%;_x000D_
padding-bottom: 50%;_x000D_
overflow: hidden;_x000D_
position: relative;_x000D_
}_x000D_
.container iframe {_x000D_
top: 0;_x000D_
left: 0;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
position: absolute;_x000D_
}<div class="wrapper">_x000D_
<div class="container">_x000D_
<iframe src="there is path of your iframe"></iframe>_x000D_
</div>_x000D_
</div>Due to browser security constraints, you will have to include the Javascript file both in the “parent” page, as well as in the page being embedded through an iframe (“child”).
In the current version, the parent page must include the latest version of jQuery. There is no dependency on jQuery for the child page functionality. In future versions, we would like to remove the dependency on jQuery for the parent as well.
Note: the “xdomain” parameter in the makeResponsive() function call is optional.
Code Sample<!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
Source: Stackoverflow.com