How can you stop a Flexslider when a YouTube video begins playing?

Question

Inside of my slider contains a video. The first slide contains this video. How can you stop the Flexslider animation when a Youtube video beings to play?

$(window).load(function(){

  $('.flexslider').flexslider({

    animation: "fade",
    pauseOnHover: true,
    start: function(slider){
      $('body').removeClass('loading');
      slider.pause();
        setTimeout(function(){
        slider.play();
        }, 6000);
    },
    after: function(slider){
        $('div.flexslider').mouseover(function(){
        slider.pause();
    });
     $('div.flexslider').mouseout(function(){
        slider.resume();
    });
}
  });
});

<ul class="slides" style="z-index:99;">
         <li>
            <div class="banner_video">
                <iframe width="450" height="280" src="//www.youtube.com/embed/Au46iRGFuUw?rel=0&autoplay=1" frameborder="0" allowfullscreen id="banner_video"></iframe>
            </div>
            <a href="master_diploma_programme.php">
            <img src="images/banner/home/master-diploma.jpg" alt="Master Diploma Programe" title="Master Diploma Programe" />
            </a>
         </li>
         <li><a href="franchise_opportunity_maharastra.php"><img src="images/banner/home/Invite_maharastra.jpg"  alt="Franchise Business for Maharashtra" title="Franchise Business for Maharashtra" width="1004" height="300" /></a></li>
    </ul>

You have to pause slider on youtube video play http://stackoverflow.com/questions/8950146/check-if-youtube-video-is-playing-and-run-script — Deepak Mane, Apr 02 '14 at 11:10

score 0 · Answer 1 · answered Apr 02 '14 at 11:13

Well in order to achieve that you need to listen to the video player events first , based on which you can control the flexslider.

In order to do so, you need to read this article about embedding the youtube player on your page and listen to the events using YouTube api.

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

so based on when the video starts/stops , you could control the flexslider in the .after block

  after: function(slider){
    if(bVideoStartedBit)   // this is set when video started via youtube Api
      slider.pause();
    else if(bVideoStoppedBit) // this is set when video stopped via youtube Api
      slider.play(); 
  });

Note:Make sure you give enough of time for the slider(time timeout to change the next slide), so that the user click over the video is captured

Happy Coding :)

How can you stop a Flexslider when a YouTube video begins playing?

1 Answers1