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

当我将youtube视频嵌入到我的移动页面中时，它会在iPhone中带来很多滚动问题（我想它也会在其他设备中出现相同的问题）。当用户点击视频本身时用户无法滚动页面。下面是代码我用于嵌入嵌入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>

来源

2013-05-16 Chuck Norris

我在我的网站上遇到了完全相同的问题，这不是谷歌博客中的情况。我确切地说它不会滚动iframe内容，它会滚动safari的视口。

我试图通过一个img，没有滚动问题，但现在的视频在YouTube应用开来代替IFRAME ...

我感兴趣的一个解决方案/解决方法

图像解决方案

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-21 14:26:35 paradiz

您能否提供有关您的解决方案的更多信息？（随着图像变化）...开放与youtube应用程序对我来说是好的:) –

IMG更换解决方案后更新 – paradiz

我已经测试过它...我认为它会重新导向到Safari后视频被关闭，但不幸的是没有:(谢谢 –

-1

据我知道你不能有滚动在iOS设备上的iFrame
由于滚动与触摸/滑动/姿势
它会滚动整个页面...即做：如果你尝试滚动
iFrame中的内容将滚动整个页面...所以iFrame
将随之移开。

所以，你可以看起来更在您不使用滚动帧的方向，
或使舒尔世界上没有必要滚动（内容为框架的尺寸是中），
或使用的fancybox型的或者有2（jquery）按钮，当按下按钮进行上/下滚动（而不是滚动条），
或有一个链接打开播放器在一个框架，
或新页面，
或视频在iOS播放器本身直接打开的标准方式（QT/Safari）。

来源

2013-05-16 17:26:45 dutchguy

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

来源

2016-02-22 20:04:37

下面的代码片段似乎可以做伎俩，而不需要任何JavaScript欺骗。同时这也确保你在iOS上获得不错的滚动动力。

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

来源

2017-09-25 21:35:00 user2019515

完美的工作！ – user2576878

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

回答

相关问题