I've made no code changes, but in the last few hours, all my embedded youtube videos (using the new iframe html5 method) started autoplaying.
From searching around online, I found some that recommended putting ?autoplay=0 in the src URL, but that doesn't work.
Another suggestion said I'd have to go back to the old method, and that that's the only one that allows us to turn off autoplay.
I'd really rather not do that, but certainly will if I need to, but the bigger question is,
Q1: Is there another way to stop it from autoplaying other than reverting to the old embed?
Side question: What changed in the past few hours that made all my videos start autoplaying?
<iframe src="//www.youtube.com/embed/N2tlvo5CI4Y?autoplay=0"
frameborder="0" allowfullscreen></iframe>
I hear it's the GoogleCast extension.
Disable it
Close Chrome
Run Chrome
Should be fixed for now.
Related
I embed a video on a Blazor-powered static page. I want the video to loop. According to docs (https://developers.google.com/youtube/player_parameters#loop), I need to have both loop and playlist params. Easy enough.
So I generate URL like this: https://www.youtube-nocookie.com/embed/tFbVZCbLhOk?autoplay=1&loop=1&modestbranding=1&disablekb=1&playsinline=1&rel=0&fs=0&playlist=tFbVZCbLhOk&controls=1&origin=http://localhost:5134 - as you can see, loop is set to 1, and playlist is set to the same video itself tFbVZCbLhOk.
The problem I am having is that when the video is embedded (or the link is accessed directly - the issue occurs there as well), it errors with This video is unavailable. Refreshing the page fixes that, however it of course is less than perfect. I am not sure what causes this, as some videos appear to randomly work on first attempt - but it's inconsistent, cause the same video might fail other time.
Removing the playlist param fixes the issue, but then the video doesn't loop properly, which is even worse for my use case.
I am not sure if it's a regression on YouTube's side, as a month or two ago, I did not have that issue - I think so at least.
It also seems like it's not bound to the tab or anything like that - when I open video once, next time I open it on a separate tab, it works - almost like if YT took its sweet time to create playlist for the video, but that's just my guess
I tried your video sample (i.e. tFbVZCbLhOk) and with the following code (which I modified from this answer), and the looping of the video works fine:
https://www.youtube.com/embed/tFbVZCbLhOk?enablejsapi=1&loop=1&playlist=tFbVZCbLhOk&autoplay=1&rel=0&showinfo=0&color=white
Probably what you're describing is another YouTube undocumented change.
<iframe onload="this.src+='';this.onload='';"
This reload once the iframe and after that it stops. I hope it will help you.
My Youtube embed appears in Chrome and Firefox, but it doesn't appear in Safari (which includes mobile Safari on the iPhone). I get the same result using Vimeo or native HTML5 video - nothing appears in this div. Here's a 1-minute video that shows exactly what's happening:
https://www.youtube.com/watch?v=YnqDlmYOKW8
I tried z-index, position, changing the width and height of the iFrame, changing https to http, removing encrypted-media in the embed code, and so much more.
The website is https://waltrib.com/shop/ and the test product is "Heavy Dirt". I'm using a plugin called Booster Wordpress that allows me to change product images into custom HTML (so I'm using it for Youtube embeds).
At 0:48 in the video above - what's bizarre is that when I open the Developer Inspector and add anything like www then the iFrame appears. Weird. When browsing in Safari, it renders Youtube embeds on every single page of the website, except for the /shop page.
I read this stackoverflow which suggests using object but that didn't work.
Has anything seen a bug like this? It's one of the strangest things I've seen recently.
Instead of :
src="https://youtube.com/embed/5i9SzaumaRg"
Use:
src="https://www.youtube.com/embed/5i9SzaumaRg" // Note the "www"
Sounds silly, but works.
Update:
It seems a change in URL of any kind refreshes the iframe and hence it appears so following would work:
let i = document.getElementsByTagName("iframe")[0];
i.setAttribute("src",i.getAttribute("src")+"?r=4535");
Execute this code only after iframe is loaded. Use load handler for that.
Try adding parameters to iFrame src link:
<iframe src="https://youtube.com/embed/5i9SzaumaRg?enablejsapi=1&origin=https://example.com/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
More on my answer here.
I have something like this.
<div class="player-wrapper"><iframe id="sc-palms" class="player-iframe" width="100%" height="120" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/164940733&auto_play=false&hide_related=false&show_comments=true&show_user=true&;show_reposts=false&visual=true"></iframe></div>
I create a soundcloud widget:
iframe = document.getElementById('sc-palms')
player = SC.Widget(iframe)
I bind some click events to trigger the toggle() method. The user also has the ability to "skip" and load a new song. This song can be from somewhere other than soundcloud, so I need to completely remove the iframe and widget. I have no issues except on internet explorer. Currently I am removing the player by this code:
player = null;
$(".player-wrapper").html("");
If the soundcloud player is playing, then the iframe is removed the widget's sound is still playing in the background. Any ideas about how to further kill this player in IE 11 would be greatly appreciated. And please ask if you need any more information.
Thanks.
I was able to achieve the desired behavior by setting the iframe's src attribute to an empty string. When I remove the player via:
$("player-wrapper iframe").attr("src","");
instead of
$("player-wrapper").html("");
The player stops playing.
I believe this may have something to do with internet explorer not allowing iframes to be removed when they have javascript events or listeners or something still tied to them. If I sound like I don't know exactly what I am talking about, it is because I don't. If anyone wants to give a better answer or comment on this answer, I can update it with a better understanding. The reason I thought to try this method was because of these two links:
https://www.drupal.org/node/1777238
http://msdn.microsoft.com/en-us/library/gg622929%28v=VS.85%29.aspx?ppud=4
The quote that got me thinking on these lines was this:
"In summary IE9 doesn't allow an iframe to be removed from the DOM if it will have javascript executed. This is to address a memory leak issue. IE9 will throw undefined property errors."
Sorry for adding some messiness to stackoverflow but if anyone can be helped by this answer, I'd like it to be out there. I've spent days trying to fix this.
We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.
Well, try this on fiddle :
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?url= http://www.youtube.com/watch?v=vabnZ9-ex7o" style="width:100px; height:32px;"></iframe>
when you OPEN the page you will see "0" on twitter. But, if you "run it" (on fiddle) it will show "24". Why? And How can I fix it?
To me is seems like a connection issue. As you click the fiddle the first time, you get the same behavior as you experience on Twitter. However, when you click run to update, it works the way it should.
... and what exactly do you mean by OPEN?
edit:
The IFrame uses the referral url. If you take a look at JSFiddle, the counter links to how many have shared the page where the IFrame is present. Instead of the YouTube url you provide using the src attribute.
This makes sense when you think of the actual use of the Tweet-button.
But it is still a bit odd, that the count it shows on JSFiddle refers to the YouTube link you provided and not JSFiddle.
However, if you do remove the YouTube link you can in fact see the counter change to how many who's shared JSFiddle's display page.
This confirms, that providing a external source to the IFrame is not a decent way of making this work.
If this is necessary, the button must be created using the anchor element instead of using IFrame.
See this https://dev.twitter.com/docs/tweet-button