JS guru in the house?

[Fzero]

I am having difficulty with a JS/Jquery Slider, called ResponsiveSlide.
It's nice, and simple to implement if just using photos.

But, I'm trying to get it to use both photos as well as embedded YouTube videos.
I add the embed code and it works fine, apart from one thing.

...When you click the prev|next arrows of the slider, the video is still playing in the background, so the audio is still there and no good for the next slide.

I'm wondering if some JS trickery could be applied, which would pause or stop the embedded YouTube playback as soon as that slide is moved away from.
Perhaps it's something in the YouTube API, or not, I honestly have no idea.

But, if anyone has done this sort of thing themselves, or fancies the challenge, please let me know

 

[FBnil]

// Styles for visible and hidden slides
visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},

So All slides are actually all visible at once (just transparant), only the z-index of the visible one is higher

Now, there is a function you can overload (redefine) and it is called after:

"after": $.noop // Function: After callback

So you need to check if the current active index has youtube, maybe because of a class, or a childnode (not sure how to identify it, but jquery should be able to find it ) and then send it a stop signal (player.stopVideo():Void) as described in:

https://developers.google.com/youtube/js_api_reference
https://github.com/viljamis/ResponsiveSlides.js/blob/master/responsiveslides.js

 

[Fzero]

Thanks, I'll try and implement this later and see how I get on

 

[FBnil]

@Fzero:
This worked for me. It's slapped together, so very ugly (just cargoculted the demo's)
You will need 1.jpg, 3.jpg and responsiveslides.min.js locally, and the next, prev are just ugly links, but you get the idea.
Note: The video plays only 6 seconds each time due to "setTimeout(stopVideo, 6000);"
So you can remove that. Once you go to another slide, the before() function actualy stops the video.
Maybe you want to put it in after(), for a nice transition, but this looked better to my eye.

 

[Fzero]

Thanks very much mate!
I'm on my phone now but will d/l your demo when get home and check it out