youtube - 无法在旋转木马/滑块中滑动过去的iframe [英] youtube - cannot swipe past iframe in carousel / slider

问题描述

我有一个带有旋转木马的响应式网站。用户可以将YouTube视频嵌入其中一个幻灯片中。在桌面上这很好用。在移动设备上，iframe显然会吃掉所有滑动事件，但您无法滑过视频。我们不得不通过替换视频图像然后使用 window.open（）打开一个带视频的新窗口来解决这个问题。

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.

很糟糕。

有没有好办法解决这个问题？

Is there a good way to overcome this?

推荐答案

简而言之，我发现我做错了。

In short, I discovered I was doing it wrong.

滑块脚本在两个桌面上运行良好。在手机上它可以工作，除了你不能滑过嵌入视频的 iframe 。

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

我的示例iframe是：
< iframe width =1280height =720src =// www.youtube.com/embed/Lzbr6fPDmkEframeborder =0allowfullscreen>< / iframe> （如果你是一名军队兽医，这是一个有趣的视频）

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)

我发现了（有点明显）youtube有一个缩略图网址的事实同样。所以在手机上我添加以下 img 标签：

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.jpgalt =1300x650/>

我找到了这篇文章

我使用的网址与他们不同，因为我将其从gmail邮件中的嵌入式YouTube缩略图中删除。

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

这篇关于youtube - 无法在旋转木马/滑块中滑动过去的iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！