I'm building a popup window. I use an iframe to cover backgroud content then show a div over this iframe to show popup content.
In the background page I have a YouTube video embedded, code sample:
<iframe width="560" height="315" src="http://www.youtube.com/embed/2XY3AvVgDns" frameborder="0" allowfullscreen></iframe>
My problem: The YouTube video always shows on top and covers my popup window.
Note: My code works fine on IE and FireFox, but not GoogleChrome
How can I let my popup window show on top in GoogleChrome?
Change the url to:
http://www.youtube.com/embed/2XY3AvVgDns?wmode=transparent
Notice the ?wmode=transparent parameter.
Setting visibility style property of the <iframe> element to hidden should help.
Can you modify your iframe to object. If yes, try using
<param wmode="transparent"></param>
Hopefully it should work.
Related
I'm creating a Wordpress site using HelpGuru by HeroThemes (https://herothemes.com/)
I added an iframe to show a vimeo video. This is my code snippet:
<div style="padding:55.83% 0 0 0; position:relative;">
<iframe src="(url)" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute ;top:0; left:0; width:100%; height:100%;" title="(title)">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
I removed the original url and title of anonymous reasons.
What I expect, and what I also get when I add this code snippet in any html editor (like W3Schools') is to display the video including a fullscreen button to show the video in fullscreen.
However the button is always missing.
What I tried:
I added allow="fullscreen" (How to enable fullscreen in IFrame) aswell as the allowfullscreen tag (see iframe docs).
In the wordpress preview it also does seem to work. Theres no extra styling added to it.
I also tried to have a look at the iframe with the chrome dev tools, there the buttons' display property is set to "none". However just forcing it to be "flex" is not going to work, as the button would not do anything then.
I want to show my keek video in my code using iframe. but did not get any code by google that let me know how can I integrate keek videos with site.
Thanks
Try This:
<iframe width="480" height="390" src="https://classic.keek.com/embed/22Preab" frameborder="0" allowfullscreen></iframe>
and you can find embed code from here:
Demo: http://jsfiddle.net/cxw80tux/
The button in the lower right corner that looks like a play button, right of the facebook icon, shows the embed code.
I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me.
However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on Stack Overflow but with no success. Here is my iFrame code:
<iframe id="myframe" width="100%" frameborder="0"></iframe>
Here is my jQuery that changes the HTML inside of my iFrame:
emailOpened.find('#myframe').contents().find('body').html(email.body);
This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.
Update
Here is my new HTML:
<iframe id="myframe" width="100%" frameborder="0">
<body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>
If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.
how to properly display an iFrame in mobile safari
https://encrypted.google.com/search?q=iframe+resize+ios+issue
I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.
Call this function directly after the html has been changed.
function resizeIframe() {
var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
I have a site, with an embeded vimeo iframe. The page flickers when it loads, even more so in Chrome, and then again on your initial hover over the video. I was wondering if the iframe could be causing this. I fI remove it doesn't happen. If I leave and remove my javascripts it still happens. So I'm wondering if anyone has had experience with this.
this is the iframe code
<iframe src="http://player.vimeo.com/video/85534169?byline=0&portrait=0" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
thanks
the site is currently live http://www.miltonkarate.com
Got the same problem : iframe with html5 video into another iframe cause the page flickering. only in chrome, others browser works well.
Remove your frameset in your website to fix the problem :
http://bokushucom.ipage.com/Miltonkarate/
this works well without clicking
I have a main page that loads a default link in an iframe http://mypage.com/myurl. Having it in a blog, I want to dynamically change that default link inside the iframe, for every post page. I load the default link like that:
<iframe width='1000' height='500' name='iframename' frameborder='0'
src='http:/mypage.com/myurl'></iframe>
(works on all browsers) and i change dynamically the link inside the iframe by putting this code in every post page:
<script type="text/javascript">
document.iframename.location = "http://mypage.com/mynewurl";
</script>
It works fine on chrome and ie, but it does not work on firefox!!
Any ideas or work around?
Here a simplified example www.tinyurl.com/9l7zt2n see the difference with firefox it loads the default link in the iframe. ie and chrome can change with the added javascript.
If it helps to test it on the blog www.tinyurl.com/9axhquh u can see it working on chrome and ie, if u click on any post title or "read more" to load the post's page, the iframe on top changes accordingly
Any ideas or work around?
document.iframename.location is probably not supported crossbrowser.
try:
<iframe width='1000' height='500' id='iframeid' frameborder='0' src='http:/mypage.com/myurl'></iframe>
<script type="text/javascript">
document.getElementById('iframeid').src = "http://mypage.com/mynewurl";
</script>
this means:
accessing an element by name through a document.elementName syntax is not supported.
an iframe element has no property called location. location is a property of window. You can access the window of an iframe by using using contentWindow.
I've written a short test here http://jsfiddle.net/FyNW9/. Run it in different browsers.