Slick Slider play video by clicking button

Question

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/

score 1 · Accepted Answer · answered Dec 28 '17 at 12:32

1

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();

answered Dec 28 '17 at 12:32

cdoshi

2,772
1
13
20

Thanks a lot! It helped :) – kipris Dec 28 '17 at 12:40
Unfortunately it doesn't work in IE10 :( Tried polyfills, jquery .each() method, but nothing works – kipris Dec 28 '17 at 16:39
Check this https://stackoverflow.com/questions/15639444/how-do-i-get-a-html5-video-to-work-using-ie10 – cdoshi Dec 28 '17 at 17:33

Slick Slider play video by clicking button

1 Answers1