我无法在带有 youtube 视频的 iframe 中添加样式答案

【问题标题】：I can't add style in an iframe with a youtube video我无法在带有 youtube 视频的 iframe 中添加样式
【发布时间】：2021-03-04 07:48:07
【问题描述】：

我使用了几种方法将样式添加到 iframe 文档的正文中并且它有效，问题是当我将 youtube 视频放入 iframe src 时，在这种情况下它不会让我向 iframe 文档添加样式. youtube是否阻止了添加？我的代码是：

<body>

    <iframe id="if" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="500px" height="500px"></iframe>   
    
</div>

<script>
    
    $("#if").on("load", function() {
    let head = $("#if").contents().find("head");
    let css = "<style type='text/css'> body { background-color: red; }</style>";
    $(head).append(css);
});


</script>

【问题讨论】：

你有没有看过 jquery 给你的头部？根据 jquery 文档“contents() 方法也可以访问 iframe 的 HTML，如果它在同一个域中”而你的不是。
stackoverflow.com/questions/4724904/…

标签： html jquery css iframe

【解决方案1】：

根据我在 lifewire (https://www.lifewire.com/iframes-and-css-3468669) 和红色订书机 (https://redstapler.co/how-to-apply-css-to-iframe/) 上阅读的内容，除非 iframe 不是跨域的，否则无法使用此方法执行此操作。上面写着红色订书机

此方法不适用于跨域内容。您需要设置适当的 CORS 标头，但由于安全风险，不建议这样做。

解决方案 1：可以使用其他托管网站（例如 Vimeo），或者您可以自己托管视频。您可以使用视频下载来下载视频并将其重新上传到您的网站（如果不是您的视频，我肯定会感谢视频的作者并提供指向该频道的链接）。

解决方案 2：另一种选择是缩小 iframe，使之没有黑色边框并应用填充，如您在此处看到的：https://codepen.io/bobsfriend/pen/PoGqKXp。

#if {
  background-color: red;
  padding: 5em;
}

&lt;iframe id="if" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&amp;mute=1" width="500px" height="281px"&gt;&lt;/iframe&gt;

解决方案 3：您也可以将 iframe 和 iframe 样式表中的所有代码复制并粘贴到您自己的代码中，然后调整该代码，尽管这可能是抄袭，因此是非法的。

【讨论】：