YouTube iFrame does not pause video

[salty10is]

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!

[Mottie]

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.

[salty10is]

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!

[Mottie]

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.

[salty10is]

Thanks for checking it out Mottie!

[Mottie]

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! =/

[salty10is]

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

[sgoerger]

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

[salty10is]

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.

[salty10is]

Whoops! Wrong button! Sorry guys.

[Mottie]

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.

[sgoerger]

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!

[Mottie]

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.

[Mottie]

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.

[salty10is]

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

[Apologia]

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?

[Mottie]

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.

[Apologia]

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.

[Apologia]

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

[Apologia]

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

<iframe width="602" height="375" src="http://www.youtube.com/embed/Co8cPLcqxjs?wmode=transparent" frameborder="0" allowfullscreen></iframe>

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

[Mottie]

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.

[Apologia]

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 });

[Mottie]

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

[Apologia]

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?

[Mottie]

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

[Apologia]

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

[salty10is]

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!

[Mottie]

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...

[salty10is]

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!

[mergeweb]

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 =]

[nicolasmesser]

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!

[primozs]

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

[Mottie]

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.

[kikbo]

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

[maggiewes]

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!

[maggiewes]

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!

[rphenix]

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

[mezod]

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!

[mezod]

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

[Mottie]

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.

[mezod]

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.

[Mottie]

@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.

[mezod]

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

[jmouse888]

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.

[Mottie]

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.

[jmouse888]

@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!

[Mottie]

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.