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

【问题标题】：Embedding youtube video has scrolling issues on iPhone嵌入 youtube 视频在 iPhone 上存在滚动问题
【发布时间】：2013-05-11 08:43:15
【问题描述】：

当我在我的移动页面中嵌入 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>

【问题讨论】：

标签： javascript iphone html youtube youtube-api

【解决方案1】：

据我所知，您不能在 iOS 设备上使用滚动 iFrame
因为滚动是通过触摸/滑动/手势完成的
它将滚动整个页面...即：如果您尝试滚动
iFrame 中的内容将滚动整个页面...所以 iFrame
会随它而去。

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

【讨论】：

【解决方案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);
    });
}

【讨论】：

您能否提供有关您的解决方案的更多信息？（随图像改变）...用 youtube 应用打开对我来说没问题 :)
我已经测试过了...我认为它会在视频关闭后重定向回 Safari，但不幸的是它没有:( 无论如何感谢您的帮助。
您是否尝试过增加 iframe 的大小，新的要求已经到位为了为关键的播放器功能留出空间，播放器必须至少为 200 像素 x 200 像素。
我已经通过图像解决方案而不是 iframe 完成了，在上面放了一些播放按钮，似乎没问题 :)

【解决方案3】：

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

【讨论】：

【解决方案4】：

下面的 sn-p 似乎没有任何 JavaScript 技巧就可以做到这一点。同时，这也确保您在 iOS 上获得良好的滚动动力。

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

【讨论】：