Html 更改 YouTube 视频嵌入的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25810861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the background colour of YouTube Video embed
提问by Fahad Hasan
I was wondering if there's any way to change the background-colour of the YouTube screen which appears when the embedded video is initially loading (image attached below)? Currently, it has a black background colour which I wanted to change to white; I tried adding theme=lightto the URL but that didn't help. I also searched for this option inside the YouTube Embedded Players and Player Parameters document but couldn't find anything related to this. This is how my video embed code looks like:
我想知道是否有任何方法可以更改最初加载嵌入视频时出现的 YouTube 屏幕的背景颜色（下附图片）？目前，它的背景颜色为黑色，我想将其更改为白色；我尝试添加theme=light到 URL 中，但这没有帮助。我还在 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>
回答by Ian Bradbury
Google YouTube themes have been deprecated:
This parameter indicates whether the embedded player will display player controls (like a play button or volume control) within a dark or light control bar. This parameter has been deprecated for HTML5 players, which always use the dark theme.
此参数指示嵌入式播放器是否将在深色或浅色控制栏中显示播放器控件（如播放按钮或音量控件）。对于始终使用深色主题的 HTML5 播放器，此参数已被弃用。
回答by Simon_Weaver
This is such a massive pain that only black is supported.
这是一种如此巨大的痛苦，以至于只支持黑色。
A bigger problem I've always had is it's almost impossible to set a width and height that rounds exactly on all screens to avoid black bars on left / top / right / bottom. These can be especially apparent on 2x and 3x screens or when using a percentage for the width.
我一直遇到的一个更大的问题是，几乎不可能在所有屏幕上设置一个完全四舍五入的宽度和高度，以避免在左/上/右/下出现黑条。这些在 2x 和 3x 屏幕上或使用百分比宽度时尤其明显。
I'm talking specifically about 1 or 2 pixels of black on one or more sides, not the large letter-boxing. So I've set the video to 16x9 aspect ratio but it doesn't round exactly to an exact number of pixels.
我是专门谈论一侧或多侧的 1 或 2 个像素的黑色，而不是大字体。所以我将视频设置为 16x9 的纵横比，但它并没有精确到精确的像素数。
Have often had to add an .overlaylayer on top of the iframe with something like:
经常不得不.overlay在 iframe 顶部添加一个层，例如：
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;
}
If only we could set the background to white it might help fix this :-(
如果我们可以将背景设置为白色，它可能有助于解决这个问题:-(
回答by BX69
Hack would be to hide the video with another div.
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>
See this JSFiddle JSFiddle.net/3mzfzm76/.
请参阅此 JSFiddle JSFiddle.net/3mzfzm76/。
Then, when it loads hide the div.
然后，当它加载时隐藏 div。
