Slick: Swiping iframes (eg. YouTube video) doesn't work

[denvers]

The touch(start|move|end|cancel) events aren't working on iframes, such as a YouTube video.

It seems the way attaching touch-events on iframes are a bit different. See http://smithamilli.com/blog/touchstart-on-iframes/

[kenwheeler]

Are you using the actual iframe as the slide? Or is it in the interior?

[denvers]

Used this markup in my test setup:

<div class="slider slider-for">
    <div><iframe width="500" height="500" src="//www.youtube.com/embed/cTSjyXL4_MQ" frameborder="0" allowfullscreen></iframe></div>
    <div><img src="http://placekitten.com/500/490" alt="" width="500" height="500"></div>
    <div><img src="http://placekitten.com/500/480" alt="" width="500" height="480"></div>
    <div><img src="http://placekitten.com/500/460" alt="" width="500" height="460"></div>
    <div><img src="http://placekitten.com/500/440" alt="" width="500" height="440"></div>
    <div><img src="http://placekitten.com/500/420" alt="" width="500" height="420"></div>
</div>
<div class="slider slider-nav">
    <div><img src="http://img.youtube.com/vi/cTSjyXL4_MQ/2.jpg" alt=""></div>
    <div><img src="http://placekitten.com/500/490" alt="" width="100" height="100"></div>
    <div><img src="http://placekitten.com/500/480" alt="" width="100" height="100"></div>
    <div><img src="http://placekitten.com/500/460" alt="" width="100" height="100"></div>
    <div><img src="http://placekitten.com/500/440" alt="" width="100" height="100"></div>
    <div><img src="http://placekitten.com/500/420" alt="" width="100" height="100"></div>
</div>

<script type="text/javascript">
$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: false,
    asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true
});
</script>

[thinsoldier]

What I've done to work around this is to show the youtube video's placeholder image as just an image tag with a play icon positioned over it then create the youtube iframe when the icon is clicked.

https://coderwall.com/p/wqkdrq

[kenwheeler]

@thinsoldier outstanding strategy

[tyteen4a03]

Please fix this issue so the workaround isn't needed. Here's a test live website if you need it: http://www.lovingfamily.org.hk/

[thinsoldier]

@tyteen4a03 There really isn't any other way. Have you experienced what it's like to work with iframes in iOS? !!!

You could maybe set the youtube iframe to ignore interacation with css pointer-events: none. Then touching the area will be like touching it's parent div which is the "slide" itself. But then you have no way of starting/stoping/time hopping the video unless you write your own video controls.

[shkodasv]

Is there any progress?

[kenwheeler]

Closing and recommending @thinsoldier 's approach. There is very little you can do about this, its an IOS issue.

[thinsoldier]

What I do (and I've had to do it with _every_ slideshow I've ever used) is to show an image pulled from the video initially, then when that is clicked I replace it with the iframe. And ALWAYS have the previous / next arrows available so that the user can still navigate to the other slides even after the iframe is being used.

[Leapfrognz]

Please note if you use the placeholder + icon approach suggested by @thinsoldier, then the video youtube view counts will not be registered. Apparently only native iframe buttons work.

[kristojorg]

Alternatively, you can absolute position a transparent cover over the iframe until it is clicked, and play the video on click.

[stratboy]

In my opinion, none of the suggested workarounds really work, except keeping the dots/arrows visible.
The image/cover way, would work well until you tap on it and the iframe is created. Then, the issue would be back: you couldn't drag the slideshow anymore from there. I'm quite suprised @kenwheeler didn't noticed this drawback when recommending @thinsoldier solution. On @thinsoldier's gist's comments though, there's some code from 'aiphee' user that could help, but I didn't tested yet.

[thinsoldier]

Since that 2014 comment on that gist I've had 3 projects where the client insisted that the youtube video NOT stop playing even after switching to another slide. So I don't think it would be a good idea to add any youtube-iframe-specific code like aiphee's https://gist.github.com/zigotica/4438876#gistcomment-1451911 to Slick because one size does not fit all scenarios and you'd have to add more and more options just for youtube and then vimeo and then pornhub or whatever else.

A cookbook of solutions to common problems would be good to have though.