CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapyoutube
user3932810
user3932810

Reputation:

Pause youtube video when slide the next item

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

Upvotes: 2

Views: 5716

Answers (3)

GeckoTang
GeckoTang

Reputation: 2785

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.

Upvotes: 1

Kbi
Kbi

Reputation: 384

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

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

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

Upvotes: 0

Rickkwa
Rickkwa

Reputation: 2291

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.

Upvotes: 2

Related Questions