youtube - cannot swipe past iframe in carousel / slider

Question

I have a responsive site with a carousel. The user can embed a youtube video as one of the slides. On desktop this works fine. On mobile however the iframe apparently eats all the swipe events and you cannot swipe past the video. We had to hack around this by substituting an image of the video and then using window.open() open a new window with the video.

It sucks.

Is there a good way to overcome this?

Answer 1

In short, I discovered I was doing it wrong.

The slider script works very well on both desktop. On mobile it works except you cant swipe past the iframe that embeds the video.

My example iframe is: <iframe width="1280" height="720" src="//www.youtube.com/embed/Lzbr6fPDmkE" frameborder="0" allowfullscreen></iframe> (fyi, its a funny video if you're an Army vet)

I discovered the (somewhat obvious) fact that youtube has a thumbnail url as well. So on mobile I add the following img tag:

<img src="http://i.ytimg.com/vi/Lzbr6fPDmkE/hqdefault.jpg" alt="1300x650" />

I found the answer in this article

The url I used is different than theirs because I ripped it off of an imbedded youtube thumbnail inside a gmail message.