更改 YouTube 视频嵌入的背景颜色

Posted 2023-02-24

【中文标题】更改 YouTube 视频嵌入的背景颜色

【英文标题】：Change the background colour of YouTube Video embed

【发布时间】：2014-11-06 18:49:59

【问题描述】：

我想知道是否有任何方法可以更改最初加载嵌入视频时出现的 YouTube 屏幕的背景颜色（下图）？目前，它有一个黑色的背景颜色，我想把它改成白色；我尝试将 theme=light 添加到 URL 中，但这没有帮助。我还在 YouTube 嵌入式播放器和播放器参数文档中搜索了此选​​项，但找不到与此相关的任何内容。这是我的视频嵌入代码的样子：

<iframe   src="//www.youtube.com/embed/(video code)?theme=light&modestbranding=1&autohide=1&showinfo=0&controls=0&rel=0&vq=hd1080" frameborder="0" allowfullscreen></iframe>

【参考方案1】：

这是一个巨大的痛苦，只支持黑色。

我一直遇到的一个更大的问题是，几乎不可能在所有屏幕上设置一个完全四舍五入的宽度和高度，以避免左/上/右/下出现黑条。这些在 2x 和 3x 屏幕上或在使用百分比作为宽度时尤其明显。

我指的是一侧或多侧的 1 或 2 个黑色像素，而不是大的信箱。所以我将视频设置为 16x9 的纵横比，但它并没有精确到精确的像素数。

经常不得不在 iframe 顶部添加 .overlay 层，例如：

overlay

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    // knock out nasty borders
    outline: 2px solid white !important;
    outline-offset: -1px;

    pointer-events: none;

如果我们可以将背景设置为白色，它可能有助于解决这个问题:-(

【参考方案2】：

Google YouTube themes have been deprecated:

此参数指示嵌入式播放器是否将在深色或浅色控制栏中显示播放器控件（如播放按钮或音量控件）。对于始终使用深色主题的 html5 播放器，此参数已弃用。

【参考方案3】：

Hack 是用另一个 div 隐藏视频。

<iframe id="myvideo"   src="//www.youtube.com/embed/TIfAkOBMf5A" frameborder="0" allowfullscreen></iframe>
<div id="myloadscreen" style="width:770px;height:434px;position:relative;top:-438px;background-color:#fff;background-image: url('http://i.stack.imgur.com/h6viz.gif');background-repeat:no-repeat;background-position:center;left:0px;"></div> 

请参阅此 JSFiddle JSFiddle.net/3mzfzm76/。

然后，当它加载时隐藏 div。

【讨论】：

该演示永远不会在 jsfiddle 示例中呈现 :(

Fiddle 都在 JS 末尾缺少 );，并且没有加载 jQuery。