Question

当我在我的移动页面中嵌入YouTube视频时，它会在iPhone中带来很多滚动问题（我想，在其他设备中也存在同样的问题）。用户在点击视频本身时无法滚动页面。以下是用于嵌入的代码

<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0"></iframe>

我们能解决这个问题吗？例如，我们是否可以仅显示视频的缩略图，并在用户点击该图像时播放它。我认为当页面中有图像而不是iframe时，滚动问题就会消失。

我尝试使用html5版本的youtube视频，但似乎iPhone仍以flash方式呈现视频。

 <iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0&html5=True"></iframe>

Answer 1

下面的代码片段似乎没有任何JavaScript技巧。同时，这也确保您在iOS上获得良好的滚动动力。

*{
    -webkit-overflow-scrolling: touch;
}

Answer 2

我的网站上存在完全相同的问题，谷歌博客的情况并非如此。我确切地说它不会滚动iframe内容，它会滚动safari的视口。

我尝试用img替换iframe，没有滚动问题，但视频现在在youtube应用中打开了......

我对解决方案/解决方法感兴趣

用于图像解决方案

var frame = $('#youtubeFrame');
if ( mobileCheck )
{
    frame.replaceWith('<a href="http://www.youtube.com/watch?v='+youtubes[currentVideo]+'"><img id="imgYoutubeFrame"/></a>');
    $.getJSON("http://gdata.youtube.com/feeds/api/videos/"+youtubes[currentVideo]+"?v=2&alt=jsonc&callback=?", function(json){
       $("#imgYoutubeFrame").attr("src", json.data.thumbnail.hqDefault);
    });
}

Answer 3

我们在移动网站上也遇到了Vimeo的这个问题。我们花了一段时间才发现用户遇到了这个问题。我们要检查的一个方法是在视频顶部添加一个div层，允许用户正常滚动，还可以作为自定义播放按钮，区分滚动和点击，或者可能需要双击播放视频。关于如何在这里做到这一点的一般原则有很好的一步一步的信息（https://css-tricks.com/play-button-youtube-and-vimeo-api/）。我很想知道其他人是否找到了解决这个问题的更好方法。

Answer 4

据我所知，你无法在iOS设备上滚动iFrame 因为滚动是通过触摸/滑动/手势完成的它将滚动整个页面...即：如果你试图滚动
iFrame中的内容会滚动整个页面...所以iFrame
会随便离开。

所以你可以在你不使用滚动框架的方向上看更多，
或使shure theres无需滚动（内容是它所在框架的大小），
或者使用fancybox类型的东西，其中内容在顶部而不是在框架中，
或者有2个（jquery）按钮按下时执行向上/向下滚动（而不是滚动条），
或者有一个在新页面中打开播放器的链接，
或视频直接在iOS播放器本身（QT / Safari）中打开的标准方式。

嵌入youtube视频在iPhone上有滚动问题

4 个答案: