更改YouTube Video嵌入的背景颜色

Question

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

<iframe width="770" height="434" 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>

Answer 1

Google YouTube themes have been deprecated：

  

此参数指示嵌入式播放器是否在暗控制或亮控制条中显示播放器控件（如播放按钮或音量控制）。 HTML5播放器已弃用此参数，HTML5播放器始终使用黑暗主题。

Answer 2

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

我一直遇到的一个更大的问题是，几乎不可能设置在所有屏幕上都精确舍入的宽度和高度，以避免在左/上/右/底部出现黑条。这些在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;
}

如果我们只能将背景设置为白色，则可能有助于解决此问题：-（

Answer 3

哈克会用另一个div来隐藏视频。

<iframe id="myvideo" width="770" height="434" 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。