i'm struggling to get a responsive iframe but so far nothing..
I use the following css and html.thanks in advance.
.testme_container {
position: relative;
height: 0;
overflow: hidden;
}
.testme_container-16x9 {
padding-bottom: 56.25%;
}
.testme_container-4x3 {
padding-bottom: 75%;
}
.testme_container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="testme_container">
<iframe src="http://www.gmail.com" allowfullscreen></iframe>
</div>
Could you try to explain in detail what you want to achieve?
I tried your code and judging by the names of your CSS classes (16x9, 4x3) it seems to work fine, however, you will have to use a different URL to test it:
<div class="testme_container testme_container-4x3">
<iframe src="http://www.w3schools.com/" allowfullscreen></iframe>
</div>
DEMO
The reason www.gmail.com doesn't show up is, because Google doesn't allow it to be displayed in an iframe. If you look at the jsfiddle you can see, I did not change anything about your code but the link and I added the class "testme_container-4x3".
This JavaScript function relies on jQuery to make all iframes on the page responsive. It handles video embeds to preserve their aspect ratio without extra vertical or horizontal margin but you need to determine the aspect ratio you'll be using in your embedded video.
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8
You can actually do this in native javascript without any need to rely on jQuery or other framework/library. Responsive Iframes would work perfectly for this.
Related
Like the title states is it possible to use to show 100% of another website on my site? Without any of the contents from my own site showing?
I tried using a code like this,
<iframe src="google.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
But my own site is still showing up below the contents when it runs out. Please help thanks.
You may try with these css codes.
body {
margin: 0;
padding: 0;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
<iframe src="https://www.premierleague.com"></iframe>
I am having a problem with iframes on iOS (Safari).
We're using a webpage within our webpage through an iframe - it looks great on PC & on Android, but on iOS the whole view is broken and I can't get the scrollable iframe to work on iOS anymore.
We used to fix the iOS scroll issue outside of the iframe itself (in a div) with:
overflow: auto;
-webkit-overflow-scrolling: touch;
position: fixed;
Unfortunately, this isn't working anymore so we took it out.
This is how the iframe looks right now:
<div class="nobottommargin">
<p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
</div>
Any idea on how to fix this issue or what other alternatives could be used here?
Edit: what I also tried, without any success:
touch-action: auto on the iframe tag
scrolling="no" on the iframe tag
pointer-events: none
Edit 2: Scrolling is working now BUT while scrolling down, it's cutting my iframe off in the middle. Issue only on iOS again (looks fine on Android & PC).
Here's the working iOS scrolling code with the iframe crop bug that I have:
<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
<iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes"> </iframe>
</div>
</div>
Edit 3: What I also tried was, removing all the CSS that tricks the browser into using the GPU:
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
This didn't fix the iframe iOS bug either unfortunately (tried with iOS 9 & 11).
Edit 4: Tried to fix the iframe cropping issue with a script, to make the height of the iframe the same as the whole body. Once again, I was unsuccessful.
<script>
$(function() {
var iframe = $("#iframe_test");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
Check this on your iPhone the scroll works smoothly.
.nobottommargin {
width: 500px;
height: 500px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
iframe {
height: 100%;
width: 100%;
border: none;
display: block;
}
<div class="nobottommargin">
<iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>
It might be worth including some external JavaScript with a media query to fix this issue, it's currently being applied to every single display.
To fix this. You need to specifically set height on the iframe.
.wrapper {
-webkit-overflow-scrolling: touch;
}
<div class="wrapper">
<iframe
style="height: 500px"
></iframe>
</div>
The hardest part is to get content height of the iframe. You can let iframe tell the parent page by using window.postMessage if you own the iframe. Otherwise you need to check height periodically until you think it is fixed.
var iframe = document.querySelector('iframe');
var setHeight = function(height) {
iframe.style.height = height + 'px';
};
var getHeight = function() {
return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
var height = getHeight();
if (prevHeight !== height) {
prevHeight = height;
setTimeout(adjustHeight, 2000);
} else {
setHeight(height);
}
};
setTimeout(adjustHeight, 2000);
I've been having this issue for some time now and finally found a fix that works for me by reducing the width of the div disappearing in the iframe. Mine was 100% and reducing to 95% solved it. I'm not sure about the actual max width in px but I think it has to be less than the width of the screen. I tried all the css tricks you mentioned and more, but this is the only thing that has worked.
How do I hide an iframe, but still load it? Etc. For playing a youtube song.
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="display: none;"></iframe>
This will hide the iframe, however it dosen't seems to load the iframe. (Song is not playing.)
Thanks
Use can use width: 0; height: 0; position: absolute; and border: 0;
So the updated code will be!
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="position: absolute;width:0;height:0;border:0;"></iframe>
Added:
style="position: absolute; width:0; height:0; border:0;"
It will hide it, make media to play in the background and it will also collapse it space!
Updated Fiddle
http://jsfiddle.net/ygkvbphs/
I was still having trouble with the iframe taking up space until I added absolute positioning. Then it stopped taking up space all together.
<iframe src="/auth/sso/" style="width: 0; height: 0; border: 0; border: none; position: absolute;"></iframe>
Set the visibility to hidden. However the space it took up won't collapse.
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="visibility: hidden;"></iframe>
The existing answers using CSS didn't work for me. Even with display:none I ended up with a 4x4 dot where the iframe was. What I had to do was the following:
<iframe width="0" height="0" frameborder="0" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>
Simply set a style of "display: none;".
<iframe src="your url" style="display: none;"></iframe>
By combining both answers, I use height:0; and visibility:0, as this works to hide any borders or box shadows as well.
You can use CSS to position the iframe off the page and out of the way. This won't leave a dot or any trace of the frame.
<iframe style="position: absolute; left: -900000px" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>
Remove the src from iframe then add it back in - forced iframe to load:
/**
* Issue: iframe doesn't show because it's in a div that is display:none on load
*
* Solution: When the button is clicked to show the hidden div:
* in the iframe, copy the url from the src attribute
* then set the src attribute to ""
* then set the src attribute back to its original value.
* This forces the iframe to load.
*/
$('#show-div-button').click(function() {
var iframe = $('iframe');
var iframe_src = iframe.attr('src');
iframe.attr('src', '');
iframe.attr('src', iframe_src);
});
I'm trying to embed a vine video in a wordpress page and am having a hard time getting the video to scale when viewed on an iPhone. I haven't really had any luck adding things to the embed code html wise. But that's probably because I'm a total noob.
Here is the code I'd like to have dynamically scale.
<iframe class="vine-embed" src="https://vine.co/v/bVuUeLXBHBF/embed/simple"
width="600" height="600" frameborder="0"></iframe><script async
src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
I think you forgot to post the code?
<iframe src="https://vine.co/v/bnrtW52x1uJ/card?mute=1"
width="100%" height="100%" frameborder="0"></iframe>
If that is vine embed code, can you just change width/height to percentages if you are currently using pixels?
I was just looking today for an answer..and this worked for me:
Style
.embed-container {
position: relative;
padding-bottom: 100%;
height: 0;
overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class='embed-container'>
<iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'></iframe>
<script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'></script>
</div>
Had this same infuriating problem, when my site needed to be responsive. Fiddling with width and height attributes and the styling did nothing for me. I ended up writing a function to calculate the width and height I needed on page load, then writing the iframe into the innerHTML of the contain div element:
function setVineDimensions () {
var dimension = document.getElementById('vine_container').offsetWidth;
document.getElementById('vine_container').innerHTML = '<iframe class="vine-embed" src="https://vine.co/v/XXXXXXXX/embed/simple" width="' + dimension + '" height="' + dimension + '" frameborder="0"></iframe>';
}
setVineDimensions();
Note that the above is just the iframe. When you grab the embed code from Vine there is a script as well. Pop that up in the header and you're good to go.
This solution works only on a page load/refresh. If you're prone to resizing your browser window it won't change.
How can I make my iframe fill the window and not display any scrollbars?
This works for IE6, I would like to get it to work for all browsers if possible:
<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>
<script type="text/javascript">
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
// not sure how to get this dynamically
height -= 20; /* whatever you set your body bottom margin/padding to be */
document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
You should be able to do this using CSS only, without any need for javascript. The following works for me in IE6+, Google Chrome and Safari:
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
<iframe id="iframe1" name="iframe1" frameborder="0"
src="theSiteToShow.html"></iframe>
Your frame margins should be set in the body of theSiteToShow.html.
UPDATE
Following your comment, I used the following as a test page:
<html>
<head>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#iframe1 {
position:absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe>
</body>
</html>
Tested in IE6+, Chrome, Safari and Firefox, it works just fine and fills the entire window.
I was having the same issues with the scroll bars as well as the No Context Menu showing up, even though all these elements had been disabled. After a few days of trying to solve them, I stumbled on this post, which helped a bit, but led me onto finding a post on flexible webplayers with three code examples. Here're the links:
http://virtualplayground.d2.pl/?p=367#comment-224
Download package
Use the index file if you want a blank sheet to work from, replace your existing code in your exported .html file (from Unity export), replace the 'unityObject.embedUnity' link with your own link to your .html file located on your server.
To embed the player in your page using an iframe add:
Lock and load.
Hope this helps.
^_^