YouTube iFrame does not pause video

Question

YouTube iFrame does not pause video

salty10is opened this issue 13 years ago · 46 comments

salty10is commented 13 years ago

Steps to reproduce: (Using the video demo)

Enable autoplay
When the YouTube iframe is the active panel press play
Take mouse out of slideshow area

The issue is that the slideshow will continue to autoplay even though a youtube iframe video is playing

Thanks for your help! Awesome work!

Answer 1 · 2011-09-16T18:59:25.000Z

Could it just be the delay it takes to start the video? It takes a few seconds for the video to start up, so the slideshow may continue in that start up window.... does it pause and restart the next time it comes into view? Maybe try increasing the delay time a bit more.

Answer 2 · 2011-09-19T13:52:30.000Z

Thanks for the reply Mottie,

I doubled the delay time to see if it would fix the issue, but the slideshow will continue in autoplay mode even after the iframe video has begun playing.

Thanks for your help!

Answer 3 · 2011-09-20T16:45:45.000Z

It appears that something changed with the YouTube API... I think I may just have to have the video extension load the YouTube API - I was trying to avoid doing that, but it may be the best solution. Give me some time to work on it as my time is somewhat limited now.

Answer 4 · 2011-09-23T13:37:41.000Z

Thanks for checking it out Mottie!

Answer 5 · 2011-10-07T02:48:44.000Z

Just to update you, I've been working on this fix when I have time... hopefully I'll have it done by this weekend. But no guarantee! =/

Answer 6 · 2011-10-07T11:43:58.000Z

Awesome! Thanks for your committment to this slider!
On Thu Oct 6th, 2011 10:48 PM EDT Rob G wrote:

Just to update you, I've been working on this fix when I have time... hopefully I'll have it done by this weekend. But no guarantee! =/

Reply to this email directly or view it on GitHub:
https://github.com/ProLoser/AnythingSlider/issues/191#issuecomment-2317516

Answer 7 · 2011-10-16T22:19:31.000Z

Hi Mottie, salty,

Hope you guys don't mind me joining in on the thread...I have come up against this same problem for a client installation. I tried the old embed code, just to give it a shot, but that didn't work for me either. So, anyways, Mottie if you have any updates I'm all ears, and like salty I appreciate your work on this awesome slider for everybody!

Thanks,

Steve

Answer 8 · 2011-10-17T16:31:01.000Z

Hi Sgoerger! You're welcome to comment on this thread.

I am surprised the route didn't work for you since this is what I've fallen back on until this issue is resolved. Any chance there is a link I could check out where it's not working? If not, the only explanation I could think of would be that the video script isn't loading properly.

Answer 9 · 2011-10-17T16:31:38.000Z

Whoops! Wrong button! Sorry guys.

Answer 10 · 2011-10-17T16:42:22.000Z

Sorry guys, life has been hectic and I've finally caught up with updating my other projects (almost LOL).

I've been working on this on and off, but the silly youtube plugin keeps giving me errors and I can't figure out why....

In the mean time, I was helping someone else about iframes still appearing in iOS so I ended up just adding a fade effect which hides the iframe and essentially stops the video playing - here is the demo. But it also resets the video so you can't resume it from where you paused. I guess it'll work as a temporary fix until I get this issue resolved.

Answer 11 · 2011-10-17T18:25:17.000Z

Hey Salty,

If you want to take a look, its at http://www.taosinjurylawyers.com/. The first video on the slider there is the old embed code. I think the video extension is loading correctly, but if you see anything else I should tweak, let me know.

Mottie, I'll give your new version a try too and see if that works for what I'm doing. Thanks!

Answer 12 · 2011-10-17T20:39:25.000Z

Hi sgoerger!

There is a known problem in IE8 with adding embeded videos into the first and last slide, it's a bug in jQuery v1.5-1.6.2 and you are using 1.6.1. Get more details at the bottom of this page.

And the reason the embedded video isn't pausing is because it needs to have "swfobject.js" loaded to update the video with the API running.

Answer 13 · 2011-11-02T16:46:28.000Z

I've fixed this issue in the latest version.

But during the process, I discovered that everything is completely messed up in Safari for Windows. I narrowed the problem down to including HTML5 video along with iframe/embedded videos. For some reason, the HTML5 video shifts all of the other vidoes down and right. But, If you disable/remove the HTML5 video, everything looks and works correctly. I'll try to figure out why this is occurring, but it may take some time.

I'm not sure if the Safari problem also occurs in iOS, so I would appreciate any reports on this.

Answer 14 · 2011-11-04T13:18:53.000Z

Great! I look forward to testing it over the weekend. Thanks Mottie!

Answer 15 · 2011-11-08T14:48:12.000Z

I seem to recall reading in the past about an issue with the YouTube videos pausing when someone manually clicks to another slide. Is that a known issue? I start the video, and the auto slide show stops, but if I manually click to go to the next slide, the video continues playing in the background. How can I stop that from happening?

Answer 16 · 2011-11-08T14:54:11.000Z

Hi Apologia!

Is there a particular browser this is occurring in? I just tested the video demo by clicking arrows, tabs and using arrow keys and the videos paused every time.

Answer 17 · 2011-11-08T14:57:25.000Z

I am testing it in Firefox on my side. I am having other major problems in IE, where the slides are all showing, so I have not been able to test it there yet. I was having the same problem as above, where the slide was auto going past the playing video, but I downloaded the update and that fixed that issue, but didn't pause the video when manually going past it.

Answer 18 · 2011-11-08T14:58:09.000Z

OH, I am using the metallic theme if that is of any assistance.

Answer 19 · 2011-11-08T15:02:26.000Z

Also, I still have it set up with the ifram that I had set up back in July

Is that still correct, or did that method change in a recent update?

Answer 20 · 2011-11-08T15:23:47.000Z

The IE problem sounds like a javascript error... press F12 and click on the script tab then look in the console. I have a feeling it might just be a trailing comma or something.

Because the video isn't pausing, I'm guessing you might need to load the swfobject.js file or maybe you're missing the video extension. Both files are needed to control videos (swfobject is needed for embeded type videos only).

Iframes are becoming the new standard because of iOS not supporting flash. So, really you can use either one, but if your target audience views your page on a mobile device, then use iframes.

Answer 21 · 2011-11-08T15:39:17.000Z

The odd thing is, I last worked on trying to get this working on our site back in like July, and the slides looked fine in IE and FF, I was having an issue with the CSS spacing and trying to locate what element I needed to make it fit on our page, and it got pushed to the background due to time and other priorities. Now I am back to it, nothing changed since I last worked on it, and I found the code to shift the slide. But now, the video was acting up (solved by the new update) and the IE version was fried (before and after updating the files). So I am at a loss as to what has happened.

I did as you said, and checked the script, and sure enough it is giving an error:

SCRIPT1028: Expected identifier, string or number - line 44, character 1

Which is the slider script. Line 44 is the first of the two sets of closing brackets:

//<![CDATA[
$(function(){
$('#slider').anythingSlider({
width: 675,
height: 375,
startStopped : false,
theme: 'metallic',
buildArrows: false,
44 })
45 });

Answer 22 · 2011-11-08T16:26:41.000Z

Yep, see, it's the extra comma after buildArrows: false,. Remove that comma and IE will stop hacking up a lung.

Answer 23 · 2011-11-08T17:17:01.000Z

Yes, that kind of fixed the IE issue, except now after copying all of the new files over the old ones, both browsers have broken, and are showing the first slide multiple times. Do you see anything in my above code that would be causing that to happen with the new version of the .js files?

Answer 24 · 2011-11-08T19:00:51.000Z

In the latest version of the plugin, the width & height are set in the CSS,
and not as plugin options.

Answer 25 · 2011-11-08T19:01:46.000Z

AH! So I DO need to use the new CSS files too, and not just upgrade the js files.

Answer 26 · 2011-11-14T20:23:57.000Z

Hi Mottie,

I was able to test the original issue for this thread, and I am still having the same issue with the slideshow continuing after clicking play on an iframe YouTube video. I'm using the new jquery.anythingslider.js and jquery.anythingslider.video.js. I noticed the demo hosted on the wiki is doing the same thing. Am I doing something wrong? Browser used is Firefox 7. Below are the steps to reproduce...

Enable autoplay
When the YouTube iframe is the active panel press play
Take mouse out of slideshow area

The issue is that the slideshow will continue to autoplay even though a youtube iframe video is playing

Thanks again Mottie!

Answer 27 · 2011-11-14T23:56:33.000Z

Hmm, I tested this out on Firefox 8 and Chrome... I start the video and I see it buffer, then it pauses when the slideshow continues. Ugh.

I just tried to tweak the code with an idea I had to update the status while the video buffers, but it doesn't seem to update. I'll keep working on it, but honestly, troubleshooting this now is giving me grey hairs because I get script errors in Firebug every time I reload. The errors are from the vimeo and youtube script, not mine, I'm not even using their script! Anyway, it's not your problem, I'm just venting and saying that fixing this may take some time... and patience (mostly on my part).

Also, this issue now seems to be the same one as #210...

Answer 28 · 2011-11-15T14:01:13.000Z

Mottie, yes, that is exactly the issue I'm having. Mottie, are you anywhere in Ohio? I'll bring you a beer! :-) Thank you for your continued attention and patience with this!

Answer 29 · 2011-11-18T21:03:57.000Z

Well, I have this issue as well, and while I'm glad to see I wasn't doing anything wrong, it is sad to see it's become such a headache...

If this DOES get fixed, AnythingSlider might just become the Best Thing Ever. So there is that to shoot for =]

Answer 30 · 2011-11-30T21:37:37.000Z

I'm was reading through all of this and I'm not sure if anyone came up with a solution or workaround for the iframe in the first slider issue. The slider won't stop on the initial load but the video stops ok and then will run through the end on the second round of the slider. If anyone has some hints that would really make me happy :) Thanks for your help!

Answer 31 · 2012-03-08T20:06:16.000Z

Hi,

-it seams that if iframes are used then video pause on slide change is not working.
-In video demo if it looks like its working but if you remove the last LI panel with html5 videos it stops working
-while testing it seams that it does not matter if the iframe video youtube or vimeo is in the beginning, middle or the end of the panel list
-i was only using chrome
Cheers

Answer 32 · 2012-04-27T15:40:08.000Z

Update: I haven't been able to work on this, even with the new v1.8 changes. But I hope to soon... I have so many projects to catch up on! But I wanted to add that with the new cross fade mode in version 1.8, it will hide the panel (display: none) so that should stop and reset the video to its beginning. I've been too busy dealing with css/LESS that I didn't get a real chance to test it though.

Answer 33 · 2012-05-02T21:17:59.000Z

not adding anything just wanted to get notification on further comments...

Answer 34 · 2012-05-23T16:11:20.000Z

Apologies - I posted my last comment under the wrong thread (the one for the embedded video; I'm actually using the iframe option). Wondering if there might be a fix/workaround for this issue yet. Thanks in advance!

Answer 35 · 2012-07-30T19:08:04.000Z

Hi again,

Wondering if there might be any updates on this issue at this point? Looks like this was first reported close to a year ago. Would really love to be able to use the slider with a YouTube iframe.

Thanks!

Answer 36 · 2013-03-13T04:10:03.000Z

any updates? Seems to still be a problem in latest version.

Answer 37 · 2013-04-23T16:26:41.000Z

Mottie thanks for your early reply and sorry for opening a new issue, I wasn't sure this post was exactly the same as my issue because it was relatively old.

Great job you are doing here and cheers!

Answer 38 · 2013-04-24T18:23:29.000Z

It's probably my fault but I updated the anythingslider.min.js and video.min.js and now for a slider of a video and a picture i only see the video all the time, in firebug i can see the opacity changing from the image to the video and viceversa but i keep seeing the video

Answer 39 · 2013-04-24T20:57:06.000Z

Hi @mezod!

Sorry I should have emphasized this more. The video extension now requires that you initialize it manually:

$(function(){
  $('#slider')
    .anythingSlider()
    // initialize the video extension, as desired (new v1.9)
    .anythingSliderVideo({
      // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex
      videoId         : 'asvideo',
      // this option replaces the `addWmodeToObject` option in the main plugin
      wmode           : "opaque",
      // auto load YouTube api script
      youtubeAutoLoad : true,
      // YouTube iframe parameters, for a full list see:
      // https://developers.google.com/youtube/player_parameters#Parameters
      youtubeParams   : {
        modestbranding : 1,
        iv_load_policy : 3,
        fs : 1,
        wmode: 'opaque' // this is set by the wmode option above, so no need to include it here
      }
    });
});

Also, the addWmodeToObject option in the main slider options has been deprecated, so use the anythingSliderVideo wmode option instead.

Answer 40 · 2013-04-25T22:10:11.000Z

Thanks Mottie, it works great on FF. In Chrome it doesnt show the images for some reason when on a image/video slide. Any idea of what can it be? The opacity seems to work well.

Answer 41 · 2013-04-25T22:55:00.000Z

@mezod Try setting the resizeContents option to true. The reason why the image is disappearing is that the slider is getting the dimension of the <a> wrapping the image and since it doesn't have its style set to display:block, the slider thinks it has a width of zero.

Answer 42 · 2013-04-25T23:02:25.000Z

@Mottie yup, you are right! Works nicely now, thanks :-)

Answer 43 · 2013-12-05T05:58:53.000Z

Hi, I'm having the same issue again. I'm running jQuery 1.8.3 and latest anythingslider 1.9.4 (as of Dec 2013).

here is my setup:

4 iframe-d youtube videos
autoPlay on
delay 5000
default
video extension code by Mottie from 4 "floors" up.

The slide starts automatically of course and when one of the video is clicked on it will start to play, but the slideshow is not stopping/paused, and it will move on once the delay is expired. next slide is shown and then the next and so on. while the slideshow keeps on running, I can still hear the video I clicked earlier on playing in the background.

oh, btw, interestingly the setup DOES work as expected on iOS, i.e. the slideshow pauses on video play and resumes when video is ended.

not working on FF, Safari or Chrome on desktop.

Answer 44 · 2013-12-05T17:05:35.000Z

Hi @jmouse888!

Local testing of the video extension doesn't work... here is a quote from the YouTube javascript API page

Note: To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet.

I know you are using iframes, which is different from the embed docs mentioned above, but I can't find mention anywhere in the iframe documentation, but I know iframes don't work locally.

Answer 45 · 2013-12-06T01:25:24.000Z

@Mottie

Hi, I'm not running any "local" setup, everything is on a LAMP server, just getting fixed results on different platforms.

Thanks for the help!

Answer 46 · 2013-12-06T02:14:20.000Z

Hi @jmouse888!

Sorry I'm not familiar with LAMP servers. I do know that Chrome has some pretty strict cross-domain restrictions. Could that be part of the problem?

The video demo works as expected (for me), so maybe check for any network errors in the dev tools panel. Sorry I can't be of more help... maybe try asking on StackOverflow.