CODEWITHSUNDEEP
javascriptjqueryvideoyoutubeflexslider
Darvex
Darvex

Reputation: 3654

Stop flexslider when video is playing

I am using flexslider plugin in order to show a picture and video. The slides are changed automatically and it's fine with me. The problem is, that when user plays the video (iframe from youtube), flexslider continues to change slides.

I've checked the documentation and found pauseOnHover, which kinda does the trick, but i'd much rather prefer it to pause when video is started and continue when video is paused/has ended. Any suggestions on how to handle this?

EDIT

Here's the div where iframe is opened:

<div class="span6 animated fadeInLeftBig" id="main-media">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/someID?version=3&enablejsapi=1" frameborder="0" allowfullscreen id="iframe-id"></iframe>
     </div>

Upvotes: 0

Views: 4018

Answers (1)

reyaner
reyaner

Reputation: 2819

The best way to solve this, is to use YouTube API, somethnig like this:

//Implement Youtube API
(function(){ 
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();

var YT_ready=(function(){var b=[],c=false;return function(a,d){if(a===true){c=true;while(b.length){b.shift()()}}else if(typeof a=="function"){if(c)a();else b[d?"unshift":"push"](a)}}})();
YT_ready(function() {
    (function($) {
            var frameID = "yourIframeID"
            var player = new YT.Player(frameID, {
                    events: {
                        "onStateChange": function(event) {
                            if (event.data == 1 || event.data == 3) {
                                $('.flexslider').flexslider("pause");
                            }
                            else if (event.data == 0 || event.data == 2 || event.data == 5) {
                                $('.flexslider').flexslider("play");
                            }
                        }
                    }
                });
        });



    })(jQuery);
function onYouTubePlayerAPIReady() {
    YT_ready(true)
}

Upvotes: 3

Related Questions