4

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

4 回答 4

3

下面的代码片段似乎可以在没有任何 JavaScript 技巧的情况下完成这个技巧。同时这也确保你在 iOS 上获得良好的滚动动力。

*{
    -webkit-overflow-scrolling: touch;
}
于 2017-09-25T21:35:00.427 回答
1

我在我的网站上遇到了完全相同的问题，谷歌博客中不是这种情况。我确切地说它不会滚动 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);
    });
}
于 2013-05-21T14:26:35.423 回答
1

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

于 2016-02-22T20:04:37.033 回答
0

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

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

于 2013-05-16T17:26:45.090 回答