Search code examples
javascriptjqueryhtmlvideoslick.js

Slick Slider play video by clicking button

I have slider and each slider contains video as background and play/pause buttons. Trying to play video by clicking proper button, but I get this behavior: I click play button from the second slide and video plays from the first slide. The same is for pause button. Advice please how can I fix this bug? 

[].forEach.call(document.getElementsByClassName('play'), function(element, index) {
  element.onclick = function() {
    document.getElementsByTagName('video')[index].play();
  }
});

https://jsfiddle.net/7u78vwaq/3/

Solution

  • I checked your fiddle. There is a bug in the way you are adding executing click callback. Based on the code you have, replace 

    document.getElementsByTagName('video')[index].play();

    by 

    $(this).siblings().closest('video')[0].play();