如何为视频 iFrame 设置样式？答案

【问题标题】：How to style a video iFrame?如何为视频 iFrame 设置样式？
【发布时间】：2016-06-02 10:16:38
【问题描述】：

我想设置我的 iFrame 嵌入式视频控件的样式，这样它就不会具有浏览器的控件样式，而是我自己的样式。我已经搜索并找不到合适的答案。请有人知道我如何通过 JavaScript 或 CSS 或可以帮助我的链接来实现这一点。我可以在 YouTube 等一些网站上看到视频播放器的样式。

【问题讨论】：

iFrame 内容是来自与您的其他内容相同的服务器还是跨域？
请添加您拥有的代码，以便我们更好地帮助您。
@elmarko... 全部来自我的网站，我的服务器

标签： jquery css iframe html5-video

【解决方案1】：

您需要通过在其内容中添加link 或style 元素来将您的CSS 添加到iframe，就像您在普通文档中所做的那样。

另一种更适合您的问题的方法是使用shadow DOM。以下 Javascript 代码说明了如何使用此技术。

var host = document.createElement("div");
var shadow = host.createShadowRoot();

var video = document.createElement("video");

// ... set video.src, etc.

var style = document.createElement("style");

// set the styling of your video element, e.g.:
style.innerHTML = "video { border: 5px solid red; }";

shadow.appendChild(style);
shadow.appendChild(video);

// insert the host of the shadow root to the document, e.g.:
document.body.appendChild(host);

您定义的样式将仅应用于阴影根内的 HTML，从而防止您的文档的其余部分被样式化。 JSFiddle demo.

【讨论】：