我无法在带有 youtube 视频的 iframe 中添加样式
Posted
技术标签:
【中文标题】我无法在带有 youtube 视频的 iframe 中添加样式【英文标题】：I can't add style in an iframe with a youtube video 【发布时间】：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" ></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，如果它在同一个域中”而你的不是。 ***.com/questions/4724904/… 【参考方案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;
<iframe id="if" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1" width="500px" height="281px"></iframe>解决方案 3：您也可以将 iframe 和 iframe 样式表中的所有代码复制并粘贴到您自己的代码中，然后调整该代码，尽管这可能是抄袭，因此是非法的。
【讨论】：
以上是关于我无法在带有 youtube 视频的 iframe 中添加样式的主要内容，如果未能解决你的问题，请参考以下文章
嵌入 iframe 的 Youtube 视频无法在 Android 4.0.3 上播放
显示带有 iframe 页面全宽的 YouTube 视频 [关闭]
使用 HTML5 嵌入式视频与使用带有 YouTube 链接的 iframe 有啥区别？
视频取消静音时无法通过 iframe API 播放 YouTube 视频