需要什么才能在网站上播放 Youtube 视频答案

【问题标题】：What is required so that a Youtuve video will play on a website需要什么才能在网站上播放 Youtube 视频
【发布时间】：2019-06-13 21:52:51
【问题描述】：

要在网站页面上播放 Youtube 视频需要什么条件？我有一个网站，在一个页面上 Youtube 视频可以正常播放，但在另一个页面上，相同的视频无法播放。

当我将鼠标悬停在播放按钮上时，它会从黑色变为红色。

在页面上，当我将鼠标悬停在播放按钮上时，播放按钮不会改变其外观。

当我在不起作用的页面上按播放时，什么也没有发生。

我的网站是使用 Coldfusion 构建的

【问题讨论】：

StackOverflow 的目的是为与代码相关的特定问题提供答案。如果我们不知道您的网页试图加载什么，我们将无法帮助您。请比较两个页面的嵌入代码。如果您无法判断问题所在，请在此处发布以寻求帮助。
在不起作用的页面上，我在控制台中看到我收到以下错误：[Violation] 'setTimeout' 处理程序花费了 77 毫秒 www-embed-player.js:378 这是错误以及造成这种情况的原因。我的 youtube 视频在我网站上的其他页面上运行良好。不幸的是，无法使用的页面需要登录才能查看，因此我无法发布该页面的链接
That message is just a warning, i.e. debug hint. 您是否仔细检查了您在网站上使用的嵌入代码？使用其他视频能否解决问题？

标签： html youtube

【解决方案1】：

谁能解释为什么以下解决了我的问题。

在不起作用的页面上，用于显示 Youtube 视频的代码如下：

<p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true">
<iframe width="640" height="360" src="https://www.youtube.com/embed/ztr-AS-xkDQ?wmode=transparent" frameborder="0" allowfullscreen="" class="fr-draggable"></iframe>
</span></p>

在确实有效的页面上....代码没有被类 fr-video 包围。

我在其中一个样式表中发现它包含以下内容，这些内容仅在不起作用的页面上使用：

.fr-element .fr-video::after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  display: block;
  background: rgba(0, 0, 0, 0);
}

如果我删除了：

bottom: 0;

然后 Youtube 视频加载正常并播放。

谁能解释一下为什么这解决了我的问题

【讨论】：