Youtube/vimeo iframe 无法在 Firefox 中播放答案

【问题标题】：Youtube/vimeo iframe won't play in firefoxYoutube/vimeo iframe 无法在 Firefox 中播放
【发布时间】：2013-05-16 19:07:51
【问题描述】：

我正在使用 iframe 将 youtube/vimeo 视频嵌入我的网站。

<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>

{$entity->getYouTubeVideoID()} 位是 smarty 模板代码语法。我认为这不是问题，因为视频在 Chrome 和 IE9 及更高版本中可以正常上传和播放。该视频还可以很好地上传到 Firefox 和 safari，这意味着我可以看到该视频并且是正确的。但是当我点击视频时，它不会在 firefox 或 safari 中播放。

有趣的是触发了其他事件。也就是说，在鼠标悬停时，视频上的播放按钮会发生变化。在 youtube 视频中，中间带有播放图标的按钮一开始是灰色的，鼠标悬停时变成红色。所以 iframe 正在注册事件。但是，它不会在点击时播放。我不知道从这里去哪里。

我在 iframe 上拥有的唯一其他事件处理程序就是这个，但我怀疑这会搞砸它：

$(window).blur(function(){
    if($('iframe').is(':focus')){
        mySwipe.slide(mySwipe.getPos(), 1000);
    }
});

（mySwipe 指的是 swipe.js 幻灯片库）

【问题讨论】：

按下大播放按钮会发生什么？
@AhmedNuaman 播放按钮从红色变为灰色，但视频无法播放。这种行为也是不稳定的。
您是否在 iframe 上进行任何 CSS 转换？
@AhmedNuaman iframe 上唯一的样式是我在 html 中设置的 width:100% 和 height:100%。
好的，如果您要根据 YouTube 为您提供的任何嵌入代码指定高度和宽度（您可以在观看页面上找到此代码），这行得通吗？ FireFox 仍然存在一个关于 Flash 和播放器大小控制倾斜的错误：dropshado.ws/post/4085720152/css-transforms-breaking-flash

标签： javascript events iframe youtube

【解决方案1】：

我在 Firefox 中的播放按钮也有问题。我使用的是 html5 Doctype，所以我在 youtube url 之后添加了以下内容

&html5=1

也许这对你有帮助。

【讨论】：

【解决方案2】：

我根本无法在 swipe.js 库（或任何其他支持触控的 jquery 库）中播放嵌入视频。我的解决方案是从 vimeo/youtube API 中提取缩略图，并将它们用作幻灯片中的占位符。然后在打开灯箱视频的缩略图上注册一个点击事件。

【讨论】：

【解决方案3】：

我知道这个帖子已经有六年了，但我最近遇到了这个问题，互联网上的所有解决方案都不起作用。但我为我的网站想通了：

如果您有一个安全站点 (HTTPS)，并且您嵌入了带有此处发布的代码的 youtube 视频，

iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...

... Firefox 会阻止它，因为那是“混合内容”。 HTTP 不安全，因此不允许显示。

Youtube 是一个 HTTPS 网站，因此在您的 URL 中包含“s”将允许它在 Firefox 和 IE 中播放，而无需禁用安全性。

【讨论】：

【解决方案4】：

Flexslider 2 基本解决了。 Swipe.js 很棒，但在滑块中播放 youtube/vimeo 效果更好。

【讨论】：