logo标签列表

可以仅从YouTube iframe嵌入播放器中删除“稍后观看”和“分享”按钮吗？

javascripthtmliframeyoutubeyoutube-api
35

我如何从YouTube的iframe嵌入播放器中移除“稍后观看”和“分享”按钮？我正在使用以下嵌入代码来嵌入视频剪辑。

<iframe width="854" height="480" src="https://www.youtube.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>

使用showinfo=0可以移除完整的标题头，该标题头还包括视频标题。

是否可能仅从标题栏中删除“稍后观看”和“分享”按钮？

@deendyal-agarwal已经回答了你的问题。你应该将他标记为正确答案。 - Kiran
1
{btsdaf} - James Eberhardt
9个回答
28

使用YouTube嵌入的隐私增强模式（youtube-nocookie），它将隐藏“稍后观看”按钮，但不会隐藏“分享”按钮。

<iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
静态变量htmlString: String { 返回 "<head>(script)<meta name=viewport content='width=device-width, initial-scale=1'><style type='text/css'> body { margin: 0;} </style></head><iframe id='existing-iframe-example' width='100%%' height='100%%' src='%@' frameborder='0' allowfullscreen></iframe>" }这是我按照你说的字符串和格式，但它不起作用。 - Anita Nagori
到了2023年，当你点击分享>嵌入时，这种隐私模式仍然是一个可选的复选框。然而，我仍然看到分享和立即观看按钮。 - Kermit
18

这个参数已经过时，在2018年9月25日之后将被忽略。

showinfo=0 不再被支持

5
自 2018 年 9 月 25 日起，YouTube 的嵌入式播放器参数“showinfo”已被忽略，目前没有可行的解决方法或新参数可以存档旧结果。他们已经将其删除。如果您尝试使用 JavaScript 和 CSS 强制显示该参数，我几乎会建议您违反了 TOC（条款和条件），这意味着您不允许更改显示内容。人们应该知道您正在展示来自 YouTube 的内容。因此，您可以尝试使用 Vimeo 或自主托管的视频解决方案。 - Dushan
6
作为一个例子，这就是你要做的事情：
document.getElementsByTagName('iframe')[0].contentWindow.getElementsByClassName('ytp-watch-later-button')[0].style.display = 'none';

但是，简单来说，这并不容易实现，因为YouTube位于不同的域名下：
“客户端无法实现此功能。由于iFrame不属于您的域，将引发JavaScript错误“错误：未获得访问属性“document”的权限”... https://dev59.com/J3RB5IYBdhLWcg3wkIBN#30545122 但是，如果您对上面问题的答案很熟悉，您可能会找到适合您需求的答案。
5

我认为使用iframe方法是不可能实现的。我的理由是：

  • 该参数页面中没有列出此选项。
  • 我找到了此帖子，其中他们团队的一位成员表示在那个时候（2012年）这是不可能的，并且他们没有计划添加该功能。

您可以通过关闭showinfo并使用其他方法来获取视频标题，从而实现类似的效果。

3
在链接之后添加这一行。
https://www.youtube.com/embed/c5cHjtspa7M?mode=opaque&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;wmode=transparent

它将禁用分享和稍后观看选项。
1
它还将禁用标题。 - ecoe
5
你能再详细说明一下吗？如果你已经在使用iFrame嵌入的方法，那么这行代码的作用是什么？你是想指出参数吗？这个YT视频ID应该是相同的吗？（你没有说，你只是说使用这行代码？）与原帖子中的视频URL不同？这个模糊的代码如何禁用分享和稍后观看图标？ - whispers
5
不行！不起作用！ - MMG
3
如果你点击这个链接，你就可以看到它会显示后面和观看按钮。 - Anita Nagori
2
showinfo 属性在2018年9月已被弃用。这就是为什么这个答案的解决方案不再起作用的原因。 - inspirednz
2

显示信息

注意：此参数已过时，将在2018年9月25日后被忽略。

支持的值为0和1。

将参数值设置为0会使播放器在视频开始播放之前不显示视频标题和上传者等信息。

如果播放器正在加载一个播放列表，并且您明确将参数值设置为1，则在加载时，播放器还将显示播放列表中视频的缩略图。

https://developers.google.com/youtube/player_parameters

1
该OP明确排除了这种可能性。 - Hermann Döppes
这节省了我很多时间！谢谢！ - Sorin
现在showinfo已经被弃用。 - Hamza Zafeer
0

由于不可能，如果不想要分享按钮，有一些可能的替代方案：

  • 在顶部添加一个绝对定位的不可见div，以禁用点击分享按钮。或者该div可以打开一个模态框或类似的东西，使用另一种更适合用例的实现方式。
  • 在顶部添加一个图标/图片。
  • 如果在用例中将播放器缩小是正确的，分享和稍后播放按钮将变成一个“...”图标。因此，与第一个替代方案类似，可以在顶部添加一个不可见的div，当点击时将打开您自己的模态框，其中包含您实现的操作。
  • 使用Video.js及其YouTube插件，拥有自定义的播放器，没有分享按钮和稍后观看图标。当然，视频仍然托管在YouTube上。
  • 选择其他视频平台而不是YouTube。
0
使用 URL 查询字符串 ?controls=0 来控制显示什么：
<iframe 
    src="https://www.youtube-nocookie.com/embed/j8xbAwurfgo?controls=0&rel=0&modestbranding=1&origin=https://key.bio" 
    frameborder="0" 
    allow="encrypted-media;" 
    allowfullscreen>
</iframe>

YouTube Player API iframe嵌入参考 https://developers.google.com/youtube/iframe_api_reference

注意：这只在Chrome上有效，而在Firefox上无效！因为我通常使用FF进行Web开发，所以花了一些时间才弄清楚这个问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接