通过javascript为YouTube流聊天iframe定制CSS样式

我用一个简单的iframe将YouTube流媒体直播聊天嵌入到一个网站中。聊天室布局中有一些元素我想自定义，比如颜色。为了实现这一点，我尝试向我的网站添加javascript代码，并将css样式附加到iframe的头部。下面的例子没有一个不起作用，我也不明白为什么，它什么都没有改变。我唯一能看到的是样式不会添加到iframe的头部，没有控制台错误消息或simlar。如果有任何提示我的错误在哪里，我将不胜感激

我的测试仪嵌入：

---

由于安全限制，如果iframe显示的内容与运行JavaScript的域相同，则只能使用JavaScript访问iframe的内容

---

否则，什么能阻止黑客在iframe中加载某个站点，并在用户尝试登录时窃取用户的登录信息，或在用户尝试购买时窃取其信用卡号码？

能否将工作链接放入此视频不可用。我不太清楚为什么会出现此消息，我的网站上没有它，但我确实在一段时间前看到过它。我能做的是创建一个小的测试流视频，也许可以修复它。所以你会说，如果源代码的网页不在我的Web服务器上，我就没有机会自定义iframe的css代码？没错。现在，您是否可以编写一些在服务器上运行的代码，并充当反向代理来注入一些HTML是另一个问题。谢谢，为我节省了大量时间来尝试更多javascript方法。

<iframe name="chat_iframe" id="chat_iframe" allowfullscreen="" frameborder="0" height="675" src="https://gaming.youtube.com/live_chat?v=0x0C6F8iuJA&theme=dark&embed_domain=stream-team.eu" width="320"></iframe>

<script type="application/javascript">
    var head = jQuery("#chat_iframe").contents().find("head");
    var css = '<style type="text/css">' +
              '.paper-icon-button-0{display:none};' +
              '</style>';
    jQuery(head).append(css);
</script>

<script type="application/javascript">
    var $head = $("chat_iframe").contents().find("head");                
    $head.append($("<link/>", 
    { rel: "stylesheet", href: "https://stream-team.eu/chat.css", type: "text/css" }));
</script>

<script type="application/javascript">
    var cssLink = document.createElement("link");
    cssLink.href = "https://stream-team.eu/chat.css"; 
    cssLink.rel = "stylesheet"; 
    cssLink.type = "text/css"; 
    frames['chat_iframe'].document.head.appendChild(cssLink);
</script>

.paper-icon-button-0 {
    display: none!important;
}