Question

是否可以覆盖角度为4+的打字稿中来自youtube的iframe嵌入样式？

我试图覆盖嵌入iframe的CSS类，但是没有运气。

以下是youtube样式表的链接：

https://www.youtube.com/yts/cssbin/www-player-webp-vflFb1ac9.css

我要在我的网站中覆盖的类是：

.ytp-cued-thumbnail-overlay-image{
  background-size: 100%; //instead for background-size: cover;
}

我尝试执行此操作的原因是在移动视图上，缩略图叠加图像的尺寸未正确调整。

****更新****：例如：

访问此网站： https://www.wikihow.com/Embed-a-YouTube-Video-on-Your-Website
向下滚动到他们在“社区问答”下拥有的youtube视频，右键单击/检查元素在视频外部的任何地方。
使用“从页面中选择元素”工具（开发工具的左上角）单击视频缩略图
您将看到iframe广告代码和具有 background-size：封面的类“ .ytp-cued-thumbnail-overlay-image ”的div中的内容如何; 属性。
选择移动视图（位于从页面中选择一个元素旁边），或者您只是调整浏览器的大小以使其达到移动尺寸。
在我的情况下， 缩略图不会调整属性大小，并且不会同时缩小两个大小， 使用移动视图，我的解决方案是将“ 背景大小： cover 更改为100％！important; ”，但是我只能在浏览器开发工具中执行此操作，而不能在源代码中执行此操作CSS代码（对此我可能是错的）。因此，这就是为什么我提出使用TypeScript进行此操作的另一种方法的问题。

== 编辑 ==：我为这个问题写了一个小项目，该链接标记似乎已添加到iframe中，但未对其产生任何影响。另外，也请检出控制台区域。

链接到在线代码：

https://stackblitz.com/edit/angular-kvmp33?file=src%2Fapp%2Fapp.component.ts

我感谢所有建议和帮助。如果有解决方案，我会发布解决方案，并希望这会对遇到相同问题的任何人有所帮助。谢谢大家！

P.S .：这是我的第一篇文章，对于我错过任何内容或不清楚的问题，我深表歉意。

Answer 1

假设您的代码看起来像：

<link href="./my.css" rel="stylesheet" />

...

<iframe src="..."></iframe>

如果定义了在“ my.css”中提到的类，则该类将无法工作，因为iframe会加载当前页面中的另一页，因此所加载的页面仅使用其中引用的CSS。如果要覆盖已加载页面的CSS，则必须将其插入由iframe as described here加载的页面中。

Answer 2

从未测试过，但是如果整个内容都在您的 DOM 中，则只应使用CSS对其进行编辑，打开Chrome（或任何浏览器）检查器，然后尝试更改所需的类，如果可行，只需添加带有标签！important 的css，因为我想youtube css将是在您的DOM上导入的最后一件事，因此他将覆盖您使用的所有内容，因为您应该尝试使用 ！important

<iframe id="youtube_frame>
...
</iframe>

#youtube_frame .ytp-cued-thumbnail-overlay-image{
  background-size: 100% !important;
}

肥胖：请记住，将其设置为100％，以便顶层元素或任何其他元素必须具有固定的大小... 请尝试将固定的背景大小设置为400px，以检查其是否起作用

编辑：我想您应该等待DOM加载iframe，然后才尝试使用CSS操纵元素，我只是在下面测试了该代码，但是请记住，这是一个肮脏的实现，您应该观察iframe并检查其是否已加载，并在完全加载时添加您的类

setTimeout(() => {
  let yt = document.getElementsByClassName('ytp-cued-thumbnail-overlay-image')[0];
  console.log(yt);
  yt.setAttribute("style", "background-size: 0");
}, 3000)

TypeScript-以角度4以上的角度覆盖Youtube iframe样式

2 个答案: