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

当我将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>

---

据我所知，iOS设备上不能有滚动iFrame
因为滚动是通过触摸/滑动/手势完成的
它将滚动整个页面…即：如果您尝试滚动
iFrame中的内容将滚动整个页面…因此iFrame
我会带着它离开

因此，您可以在不使用滚动框的方向上查看更多内容，
或者使舒尔无需滚动（内容为其所在帧的大小），
或者使用fancybox类型的东西，其中内容位于顶部而不是框架中，
或者有2个（jquery）按钮，按下时可以向上/向下滚动（而不是滚动条），
或者使用链接在新页面中打开播放器，

---

或者是直接在iOS播放器中打开视频的标准方式（QT/Safari）

我在我的网站上也有同样的问题，但谷歌博客却不是这样。 我想它不会滚动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);
    });
}

var frame=$（'youtubeFrame'）；
如果（mobileCheck）
{
框架。替换为（“”）；
$.getJSON（“http://gdata.youtube.com/feeds/api/videos/“+youtubes[currentVideo]+”？v=2&alt=jsonc&callback=？”，函数（json）{
$（“imgYoutubeFrame”）.attr（“src”，json.data.thumbnail.hqDefault）；
});
}

我们的移动站点上的Vimeo也存在此问题。我们花了一段时间才发现用户有这个问题。

---

我们正在检查的一个解决方法是在视频顶部添加一个div层，允许用户像正常一样滚动，还可以作为一个自定义播放按钮来区分滚动和点击，或者可能需要双击来播放视频。这里有关于如何实现这一点的一般原则的详细信息（）。我很想知道其他人是否找到了更好的解决方法

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

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

---

您能否提供有关您的解决方案的更多信息？（随图像更改）。。。用youtube应用打开对我来说没问题：）我已经测试过了。。。我原以为视频关闭后它会重定向回Safari，但不幸的是它没有：（无论如何，感谢您的帮助。您是否尝试过增加iframe的大小，新的要求已经到位，以便为关键的播放器功能留出空间，播放器必须在200px到200px之间至少达到200px。我已使用图像解决方案而不是iframe完成，请在其上添加一些播放按钮，看起来还可以：）