如何设置视频 iFrame 的样式？

Question

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

Answer 1

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

另一种更适合您的问题的方法是使用 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.

如何设置视频 iFrame 的样式？

How to style a video iFrame?

css

iframe

jquery

html5-video