Control the youtube video in Bxslider to autoplay and slide to next slide after it finished

Question

I am trying to control the youtube video within an iframe. The video which is in Bxslider structure. I set the slider auto started, containing an iframe video in it.

What I would like to do is when "currentSlide" is a video slide, autoplay it and goes to next slide 'after' the video has finished. So freeze the slide until the video is finished.

I have tried but it only does the trick on first load, when the slider comes back to the first slide, both video and slider it self does not autoplay/freeze any more. The problem is there has no error messages..

HTML

<ul class="bxslider" id="main-slider">
  <li>
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/zwZkhCP9QRY?rel=0&amp;autohide=0&amp;modestbranding=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" enablejsapi="1" allowfullscreen="" id="fitvid0"></iframe>
  </li>
  <li>
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/ZLls1Wn6070?rel=0&amp;autohide=0&amp;modestbranding=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" enablejsapi="1" allowfullscreen="" id="fitvid1"></iframe>
  </li>
</ul>

JS

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

  var mainslider = $('#main-slider').bxSlider({
    speed: 1000,
    mode: 'fade',
    pager: false,
    auto: true,
    autoControls: true,
    infiniteLoop: true,
    // pause: pause,
    adaptiveHeight: true,
    onSlideBefore: function() {

    },
    onSliderLoad: function() {
      console.log('Slider loaded');
      slideInit();
    },
    onSlideAfter: function() {
      currentPos();
    }
  });

  function slideInit() {
      var currentNum = mainslider.getCurrentSlide();
      console.log('slide:' + currentNum);
      if ($('#main-slider li').eq(currentNum).find('iframe').length > 0) {
        var getFrame = $('#main-slider li').eq(currentNum).find('iframe').attr('id');
        console.log('video id:' + getFrame);
        onYouTubeIframeAPIReady(getFrame);
        console.log('data sended');
      }
    }
    //Get Video frame
  function currentPos() {
    var currentNum = mainslider.getCurrentSlide();
    console.log('slide:' + currentNum);
    if ($('#main-slider li').eq(currentNum).find('iframe').length > 0) {
      var getFrame = $('#main-slider li').eq(currentNum).find('iframe').attr('id');
      console.log('video id:' + getFrame);
      onYouTubeIframeAPIReady(getFrame);
      console.log('data sended');
    }
  }

function onYouTubeIframeAPIReady(id) {
  player = new YT.Player(id, {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}


function onPlayerReady(event) {
  event.target.playVideo();
  console.log('player triggered');
}

function onPlayerStateChange(event) {
  console.log('play Status::::::::' + event.data);
  if (event.data == YT.PlayerState.ENDED && !done) {
    var start = document.getElementsByClassName('bx-start');
    start[0].click();
    console.log('slider-started');
  } else if (event.data == YT.PlayerState.PLAYING) {
    var stop = document.getElementsByClassName('bx-stop');
    stop[0].click();
    console.log('slider-stopped');
  } else if (event.data == YT.PlayerState.CUED) {
    event.target.playVideo();
    console.log('come here cued');
  }
}

http://codepen.io/wushan/pen/VvyEGa

Answer 1

Got it to work, see this CodePen

I changed the following:

 function onPlayerStateChange(event) {
  console.log('play Status::::::::' + event.data);
  if (event.data == YT.PlayerState.ENDED && !done) {

/*~~~~~~~~~~~~~~~~~~~~~~~~~REMOVE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

** var start = document.getElementsByClassName('bx-start');

** start[0].click();

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

//ADD   bx.stopAuto();
        console.log('slider-started');
      } else if (event.data == YT.PlayerState.PLAYING) {

/*~~~~~~~~~~~~~~~~~~~~~~~~~REMOVE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

** var stop = document.getElementsByClassName('bx-stop');

** stop[0].click();

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

//ADD   bx.startAuto();
        console.log('slider-stopped');
      } else if (event.data == YT.PlayerState.CUED) {
        event.target.playVideo();
        console.log('come here cued');
      }
    }