Pause youtube video when slide the next item

Question

I am using bootstrap slider on my page. I need to pause the currently playing video when slider moves to the next one. I tried using youtube callback but it doesnt seems like working, may be my way of applying is not right.

here is what I have used

jQuery(function ($) {
        $('div.carousel-inner div.active').attr('id', 'current');
    });

    function callPlayer(frame_id, func, args='') {

        if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
        var iframe = document.getElementById(frame_id);
        if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
            iframe = iframe.getElementsByTagName('iframe')[0];
        }
        if (iframe) {
            iframe.contentWindow.postMessage(JSON.stringify({
                "event": "command",
                "func": func,
                "args": args || [],
                "id": frame_id
            }), "*");
        }

        jQuery(function ($) {
            $('div.carousel-inner div.item').attr('id', '');
            $('div.carousel-inner div.active').attr('id', 'current');
        });
    }

Demo

kindly refer http://9bugs.in/pause-youtube-video-within-iframe-using-external-button-click-in-javascript-or-jquery-268 — RRR, Apr 19 '16 at 07:35

score 2 · Answer 1 · answered Apr 19 '16 at 07:42

2

I binded the carousel controls in the javascript portion instead of having it inline in the html.

jQuery(function ($) {
    // ...

    $(".carousel-control").click(function() {
        callPlayer('current','pauseVideo');
    });
});

See the revised jsfiddle.

answered Apr 19 '16 at 07:42

Rickkwa

2,197
4
23
34

in this, when u slide to send slide 1st slide video gets paused but u play 2nd slide video and move to 3rd slide then 2nd slide video is still playing – Apr 19 '16 at 07:43
I think the problem is somewhere else. http://jsfiddle.net/2q99udgk/406/ I give each carousel item a different class (foo1, foo2, foo3). Then in callPlayer, I alert the `iframe.className`. Look at how it shows `foo1` two times in a row. – Rickkwa Apr 19 '16 at 08:17
but what is the solution for pausing the 2nd slide video when moved to 3rd slide? – Apr 19 '16 at 08:29
Any idea why the video is removing the thumbnail image and showing the black screen while sliding back and forth? – Apr 26 '16 at 10:55

score 1 · Accepted Answer · answered Apr 19 '16 at 07:50

1

DEMO

I modified your HTML as follows.

- onclick="callPlayer("current","pauseVideo")"
+ onclick="callPlayer('current','pauseVideo')"

And I change LOAD TYPE from onLoad to No wrap in <head>.

However, You should attach Click Event with jQuery on method.

answered Apr 19 '16 at 07:50

GeckoTang

2,697
1
16
18

same here.. unable to pause the 2nd slide video when moved to the 3rd slide. – Apr 19 '16 at 08:30
Oh, I'm sorry. you mean this? http://jsfiddle.net/2q99udgk/407/ However, you should review structure. – GeckoTang Apr 19 '16 at 09:05
That worked but could u pls explain what was the issue? – Apr 19 '16 at 09:17
Hmm, I think the prev video will not pause when you use auto-play. If I have time, I'll write a refactored code. – GeckoTang Apr 19 '16 at 09:21
@user3932810 I'm sorry to be late. Please make sure my fiddle. http://jsfiddle.net/2q99udgk/408/ – GeckoTang Apr 19 '16 at 18:06
Thanks.. but another problem with it.. Incase if we have an image in the slider, it is affecting the carousel movement. keep clicking on the right arrow and it doesnt work when it reached image slide. check the fiddle http://jsfiddle.net/2q99udgk/410/ – Apr 21 '16 at 07:17
Ah, I didn't know the slide contains an image. you should check iframe or image on `slide.bs.carousel` event. http://jsfiddle.net/2q99udgk/412/ However, your reply is off-topic. – GeckoTang Apr 21 '16 at 09:36
Sorry my bad, I forgot to mention that in my question. Slider contains both image and videos. How do we get it work in this case?? in your recent fiddle(with image) video is not pausing when moved to next slide. Please have a look n suggest. – Apr 21 '16 at 11:47
Sorry. I mistook. Please see fiddle http://jsfiddle.net/2q99udgk/412/ . I needed to use `currentVideo.is('iframe')`. – GeckoTang Apr 21 '16 at 14:50
this still not pausing the video :( – Apr 22 '16 at 04:43
Got it.. I added `currentVideo.is('iframe')` as u suggested and it worked http://jsfiddle.net/2q99udgk/413/ Thank you :) – Apr 22 '16 at 06:02
can u pls chk this thumbnail issue of the same question. http://stackoverflow.com/questions/36860667/youtube-embeded-video-not-displaying-thumbnail – Apr 26 '16 at 10:47

score 0 · Answer 3 · edited May 23 '17 at 12:14

You could use the youtube iframe api. For that you have to append ?enablejsapi to your iframe source. You should maybe follow the tutorial from youtube.

https://developers.google.com/youtube/iframe_api_reference

onYouTubeIframeAPIReady() will be fired
now create a yt player object
your code can now call pauseVideo() on your object

Also answered in this question: Pausing YouTube iFrame API in JavaScript

Pause youtube video when slide the next item

3 Answers3