Question

我想设计我的iFrame嵌入式视频控件，因此它不具备浏览器的控件风格，而是我自己的样式。我搜索过，无法得到合适的答案。请任何人知道如何通过JavaScript或CSS或可以帮助我的链接实现这一目标。我可以在YouTube等网站上看到视频播放器的风格。

Answer 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.

如何设置视频iFrame的样式？

1 个答案: