Javascript 如何使用CSS/JS禁用youtube视频上的“观看和共享”按钮

我想使用CSS/Reactjs禁用youtube视频上的观看和共享按钮。我使用ReactPlayer将youtube视频嵌入到我们的应用程序中，并试图通过获取iframe和更改与按钮相关的css类来禁用观看和共享按钮，我能够获取与视频相关的iframe。但是，无法获取对#文档中元素的引用，该文档是iframe的一部分，无法对其进行操作

我已经通过几个帖子，知道这是由于CORS

早期我们可以通过设置配置参数showinfo=0和rel=0来实现这一点。但是现在有一些不推荐的

---

有人能帮我吗。

为youtube url添加这些查询参数

---

正如您从Youtube修订历史记录中正确注意到的，showinfo参数在2018年9月25日被弃用。 “稍后观看”和“共享”按钮也是此功能的一部分，不能删除

此外，您永远不能访问/操作来自不同源的iframe的dom内容。它就像一个web应用程序可以访问另一个应用程序内容

最后，这里我唯一能建议的黑客就是你的css

position:absolute；指针事件：无

用于虚拟禁用的共享按钮，并将其放置在web应用程序中youtube播放器的共享图标上方

.overlay-banner {
    position: absolute;
    width: 560px; // width of video player
    height: 58px; // height of banner
    background: transparent;
    top: 0px;
    left: 0;
}

此覆盖将阻止单击

共享/观看

以后的图标。这可能是糟糕的用户体验。工作

因此，您可以使用自定义背景图像或颜色修改此

覆盖横幅

css

背景

，并使其仅在视频处于暂停/完成状态时显示：块，您可以通过Yotube api获取该状态

---

希望这能奏效。：）

您找到解决方案了吗？使用此示例显示信息：此参数已弃用，将在2018年9月25日后被忽略。当我单击“播放”按钮不再工作时，共享按钮将返回