I have used the following simple iframe to embed a Google map on my website. I can not interact with embedded map such as zoom, click, pan etc.
I have also added sandbox="allow-forms allow-modals allow-scripts" but no change. It seems working in the following snippet but not on my website
<iframe height="450" src="https://www.google.com/maps/embed?pb=
!1m18!1m12!1m3!1d2543.41275071
!2d51.17525880000005
!3d35.72279246142077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768
!4f13.1!3m3!1m2!1s0x0%3A0x61de87510eccb16!2z2LPZhdin2YjYsSDZvtmE2KfZhiwgVGVocmFuLCBJcmFu
!5e0!3m2!1sen!2sau!4v1471218824160"
style="max-width: 100%; width: 100%; border: none; padding: 0px; margin: 0px; height: 450px;" sandbox="allow-forms allow-modals allow-scripts">
</iframe>
The problem was another graphical DIV with relative position on the main layer. I have set style="pointer-events:none" on that DIV and done.
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'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.
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.
I have a flash video player that I would like to embed in other pages, so I created an iframe to do this. It has to be an iframe because it depends on other swf files that get loaded into it (plugins).
The weird thing is the video does not play when loaded inside the iframe, but if I go to the html source and cut and paste the tag outside of the iframe it works.
<iframe width="500px" height="500px" src="http://somedomain.com/embed.aspx" ></iframe>
Check your console. If you are also getting these errors:
"Blocked script execution in '...' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."
You can configure those sandbox flags on the iframe
<iframe width="100%" sandbox='allow-scripts allow-same-origin'></iframe>
Got it working by adding come css to the html page containing the flash player. It seems the absolute positioning made all the difference.
html, body, object { margin: 0px; padding: 0px; position: absolute; height: 100%; width: 100%; overflow: hidden; background-color: #000; }
I embed iframe element in my HTML page:
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
applet.html looks like this:
<html>
<head>
</head>
<body>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
</body>
</html>
The problem is: how to display a div element (with position: absolute) over a Java applet which is inside iframe.
I tried to use another iframe element:
<html>
<head>
</head>
<body>
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 99"></iframe>
<div style="position: absolute; top: 10px; left: 10px; background-color: gray; height: 150px; width: 150px; z-index: 100">Hello World</div>
</body>
</html>
Works fine in IE, Firefox but not in Chrome.
I found an article that seems to provide a solution, so I'll not claim the credit for coming up with it:
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
From the article:
The solution is to have a third Iframe
C within Iframe A. Iframe C has a
z-index within Iframe A that is higher
than the z-index of the Applet. It is
positioned so that it's rectangle as
considered by the top page is
identical to that of the Iframe B
overlay.
I pasted second IFrame code from your main page into applet.html like so:
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 1"></iframe>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
And it seemed to do the trick in chrome.
I did get a frame border but i'm guessing this is fixable. Give it a go.
This problem is partly solved with latest updates, at least on MacOSX:
I tested DIVs with fancy CSS effects like opacity, shadows and round corner over an applet, it is working well in Safari, Firefox 11 and Chrome 19: no issue in the composition, no glitches.. no iframes!
It is still broken on Ubuntu, though. Really frustrating. I don't know for Windows?