Youtube Iframe (with videojs) and setOption('responsive',...) causes the player to play only audio

[vellip]

Using video.js and video-youtube.js (plugin for youtube support) creates an youtube Iframe. I am using it within the slick slider. Using your slick('setOption', 'responsive', [ array here ], true) function causes the video to behave weird, playing only audio.

http://jsfiddle.net/68tvte4q/4/

Steps to reproduce the problem

1. Youtube Iframe in Slick-Slider
2. use slick('setOption', 'responsive', [ array here ], true) to change the visible items.
3. Poster doesn't hide, audio starts playing

   What is the expected behaviour?

The poster should hide so it doesn't cover the video underneath.

What is observed behaviour?

Poster stays on top of video, covering video.

More Details

Since this worked with a different slider, sly.js, (I changed to slick because I preferred it more), I think this is an issue on your side. I tried figuring out what exactly is causing this by commenting out and breaking out of functions early but it seems to be too nested for someone who's not into this code base. I also tried removing the 'true' as last parameter and instead call internal functions like 'refresh', 'reinit' or 'init' but it either caused the same problem or didn't update the slidesToShow. I think it starts somewhere in checkResponsive but since this function calls refresh, it can be anywhere else too.

[leggomuhgreggo]

Hey @vellip I'm not clear about the expected behavior. I understand that only audio is playing, but in your fiddle, nothing seems to be playing.

My first thought was that it might have to do with some peculiar interaction of display: none, but that's just a shot in the dark.

[vellip]

Hey,

I removed the display: none earlier and replaced it with visibility: hidden and even left: 2000px but it didn't change anything. I also tried to remove the transform you guys use for animation and replaced it with left: (with the particular setting).

Maybe you didn't listen long enough, on chrome it only plays audio. I'm afraid I took a video that starts quietly, but you can hear something! 😁

[leggomuhgreggo]

Doh, my playback issue was due to an over-exuberant uBlock. 😵

Man, gotta to tip my hat to @kenwheeler @simeydotme and the other contributors for keeping the library well organized and easy to reason about. So easy to follow.

The issue is with detach() and HTML5 Video. When setOptions includes updates to the responsive settings, and refresh is set to true, the slide elements are detached from the DOM which breaks html5 video's weakass browser API.

Specifically, if refresh: true in setOptions, reinit() will call checkResponsive() with forceUpdate: true. When forceUpdate: true, checkResponsive() tests to see if there are changes to the responsive settings and, if there are, it calls refresh() which calls destroy() which uses detach()

There are probably a couple different workarounds, but my first thought is to listen for the reInit event and also reinit the video. Here's a stackoverflow on the subject which might be a helpful starting place.

Here's some related issues. Part of me questions whether to qualify this as a full fledged bug, since it's half an issue with the browsers, but in any case I'll keep this as the tracking issue

Thanks for the issue @vellip!

[vellip]

Just wondering though, is it necessary to kind of rebuild half the DOM for refreshing? I mean, in my case I use the setOption with 'responsive' every time someone clicks one slide, which must be awful for performance because it must rebuild half of the slider DOM and (if I use that workaround) the entire videoplayer (when there is a video).

However there's unfortunately no easy way to reinit the video with video.js. But that's nothing on your side. @leggomuhgreggo, Thanks for your help mate, I appreciate it!