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
Related
For months I've been noticing embedded youtube videos appear white on any other page, now I found out that I can watch those videos by inspecting the page and putting -nocookie at the hostname of the iframe src, i.e. https://www.youtube-nocookie.com/embed/(VIDEO_ID).
I want to know why this happen and how to fix it, my first thought was to make an userscript to change it in every page.
EDIT: It works fine on Edge and Firefox but not on Chrome, even though my settings for cookies are enabled.
SOLUTION: The problem was that my userscript on Tampermonkey extension (which was supposed to affect the youtube page) was affecting every page with an embedded video, from now on I can figure it out what part of the code was doing that but for now it's turned off.
Thanks to #JasonB for the suggestion about extensions.
This -nocookie url came out almost a decade ago when cookies were still often turned off. This codepen shows that the standard youtube embed code works just fine on a simple site.
<iframe width="400" height="300"
src="https://www.youtube.com/embed/9Ht5RZpzPqw" frameborder="0"
gesture="media" allow="encrypted-media" allowfullscreen=""></iframe>
https://codepen.io/anon/pen/baqdGz
Are there any details about your domain or a link to a broken embedded video on your site that might help us better troubleshoot your issue?
The thumbnail worked just fine, I left it open for 5 minutes and then played the video, and that is all functional. Looks like there's one js error related to the codepen setup - not what you're experiencing.
I am using youtube iframe for embeding on my site. Currently I am in local development, but if I use iframe from youtube, it will give me the error message in console:
Loading failed for the <script> with source “https://static.doubleclick.net/instream/ad_status.js”.
I dont have any adblockers on.
After the error, the rest of the page refuses to load and work correctly. For example, I had javascript loaders at the end of the page, those did not work/load, I have since moved them to the header and now that works. I am not doing anything magical, just including the iframe youtube has on their site right into the main page.
iframe usage:
<iframe width="560" height="315" src="https://www.youtube.com/embed/#" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
Which browser did you try?
I tried with firefox and chrome with the following results:
Firefox with AdBlock Plus: Loading failed
Firefox with ABP disabled (in the extensions page of Firefox): Worked
Chrome without ABP: Worked
I'm having a really strange issue with vimeo & html5 fullscreen player.
I have this code in my template :
<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).
You can experiment this bug here : http://webrelais.net/pingpong/projet/proxipolis
Has anyone experienced this issue ?
Thanks a lot for your help !
I solved the problem by disabling animate.css style on the element which included my iframe.
Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.
Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.
A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.
Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.
animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.
this page http://falsefeatures.com/aBookForPrivateReading/PlayHeavyWater should autoplay as I understand it.
the code looks like this:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/108973626&color=9900EE&auto_play=true&show_artwork=false"></iframe>
the audio does play if button clicked and I can change the button color and show or hide the artwork, as you'd expect. but no autoplay?
I've simplified for debug purposes but I have another page which I'd swear was autoplaying last week just fine. I have tried different browsers, computers, connections: what gives?
~Marqso
your link auto plays fine for me on Chrome.
It won't work on iOS devices though – there's a limitation on Apple's side that prevents media from auto playing in order to save on user's traffic.
This was caused by a regression on our part and was fixed last week.
https://twitter.com/flaneur/status/398439823234846720
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.