页面加载后注入CSS/脚本方法咨询：移除YouTube嵌入视频头部

YouTube官方提供的移除嵌入视频标题栏的功能自2018年起已被弃用，无法通过URL参数直接实现。目标元素是iframe内的.ytp-chrome-top类容器（右键点击标题可查看该元素，如图1），必须在页面及iframe加载完成后执行代码才能生效，以下是两种可行的解决方案：

方案1：原生JS移除元素 #

将以下代码放在<body>末尾（紧跟iframe之后）：

window.addEventListener('load', () => {
  document.querySelector('iframe').contentDocument.querySelector('.ytp-chrome-top').remove();
});

方案2：动态注入CSS隐藏 #

该方案通过设置display: none隐藏目标栏（效果如图2），同样将代码放在<body>末尾：

window.addEventListener('load', () => {
  document.querySelector('iframe').contentDocument.head.insertAdjacentHTML('beforeend', '<style>.ytp-chrome-top{display:none!important;}</style>');
});

关键注意事项 #

浏览器的同源策略会阻止页面脚本直接操作跨域iframe（如官方YouTube嵌入）内的DOM。此时可以通过用户脚本工具（如Tampermonkey）运行上述代码，或者在可控的同域环境中使用上述方案。

内容的提问来源于stack exchange，提问作者Imdadullah Babu