Question

我想使用CSS / Reactjs在YouTube视频上禁用观看和共享按钮。我正在使用ReactPlayer将youtube视频嵌入到我们的应用程序中，并试图通过获取iframe并禁用与按钮有关的css类来禁用观看和共享按钮，我能够获取与视频有关的iframe。但是，无法引用iframe中用于操纵它们的#document中的元素。

我浏览了几篇文章，并且知道这是由于CORS造成的。

我们可以通过设置config参数showinfo = 0和rel = 0来实现此目的。但是现在已经过时了

有人可以帮我吗？

Answer 1

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

此外，您将永远无法访问/操纵来自不同来源的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

因此，您可以使用自定义背景图片或颜色来修改overlay-banner CSS background，并仅在视频处于暂停/完成状态时才能将其display: block设置为可以通过Yotube获取api。

希望这行得通。：）

Answer 2

为youtube网址添加这些查询参数

https://www.youtube.com/embed/tFlAFo78xoQ?mode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent

如何使用CSS / Reactjs在YouTube视频上禁用观看和共享按钮

2 个答案: