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

Question

我想知道是否有办法更改嵌入视频最初加载时出现的YouTube屏幕的背景颜色（下面附有图片）？目前，它的背景颜色是黑色的，我想将其更改为白色；我尝试向URL中添加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>

- Fahad Hasan

Answer 1

Google YouTube主题已被废弃:

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

- Ian Bradbury

Answer 2

这非常令人恼火，

对于任何寻找易于操作以隐藏2像素黑色边框的人， 我使用了与Simon_Weaver先前提到的类似解决方案。 我只是在iframe的父容器中添加了一个伪元素(:before)，它工作得很好，没有任何边框。

.vid-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
    
.vid-container:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    outline: 4px solid #fff;
    outline-offset: -2px;
    pointer-events: none;
  }
    
.vid-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

- Gal Aharon

Answer 3

这是一个非常棘手的问题，只支持黑色。

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

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

- Simon_Weaver

Answer 4

“Hack” 的方法是使用另一个 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。

- BX69

---

那个演示在 jsfiddle 的例子中从未呈现 :( - Clay Nichols

Fiddle中的JS代码末尾缺少);，且未加载jQuery。 - cngodles