我想使用 CSS / Reactjs 禁用 YouTube 视频上的观看和分享按钮。我正在使用 ReactPlayer 在我们的应用程序中嵌入 youtube 视频，并尝试通过获取 iframe 并更改与按钮相关的 css 类来禁用观看和共享按钮，我能够获取与视频相关的 iframe。但是，无法引用 #document 中的元素，该元素是 iframe 的一部分来操作它们。
我浏览了几篇帖子并知道这是由于 CORS。
早期我们可以通过设置配置参数 showinfo=0 和 rel=0 来实现。但是现在已经弃用了
有人可以帮我解决这个问题吗？
【问题讨论】：
标签： javascript reactjs youtube-iframe-api
正如您从 Youtube 修订历史记录中正确注意到的那样，showinfo 参数自 2018 年 9 月 25 日起已弃用。 “稍后观看”和“分享”按钮也是此功能的一部分，无法删除。
此外，您永远无法访问/操作从不同来源提供的 iframe 的 dom 内容。它就像一个 Web 应用程序可以访问另一个应用程序内容。
最后，我可以在这里建议的唯一技巧是你的 css position: absolute; pointer-events: none; 为你的虚拟禁用共享按钮，并将它完全放在你的网络应用程序中 youtube 播放器的共享图标上。
.overlay-banner {
position: absolute;
width: 560px; // width of video player
height: 58px; // height of banner
background: transparent;
top: 0px;
left: 0;
}
此叠加层将阻止点击share/watch 以后的图标。这可能是糟糕的用户体验。工作fiddle link
因此，您可以使用自定义背景图像或颜色修改 thisoverlay-banner css background，并仅在视频处于暂停/完成状态时将其设为 display: block，您可以通过 Yotube api 获取。
希望这可行。 :)
【讨论】：
【讨论】：