在网页中嵌入视频后如何删除 youtube 品牌?

IT技术 javascript html youtube-iframe-api
2021-03-08 07:38:52

我在用

<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

这将删除右侧底部的“Youtube”标志。并且还删除了悬停时出现的“标题栏”。

但在这个问题中,当我将鼠标悬停在视频上时,然后在右侧底部“Youtube”缩略图/文本后面,当我移除鼠标时,它就会消失。

当我使用“autohide=1”时,控制栏会被隐藏,并且在右下角有一个“Youtube”图标/图像/徽标悬停显示。我在用

iframe.setAttribute("src", "youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;"); 

这。有了这个,我可以从控制栏中删除/隐藏标题栏和徽标,但在右下角有一个其他徽标在悬停时出现在屏幕上,我应该使用哪个参数来隐藏它?

考虑红色方块标记部分

6个回答

您可以添加?modestbranding=1到您的网址。这将删除徽标。

适度品牌(支持的播放器:AS3、HTML5)

此参数可让您使用不显示 YouTube 徽标的 YouTube 播放器。将参数值设置为 1 可防止 YouTube 徽标显示在控制栏中。请注意,当用户的鼠标指针悬停在播放器上时,一个小的 YouTube 文本标签仍会显示在暂停视频的右上角。

&showinfo=0 将删除标题栏。

showinfo(支持的播放器:AS3、AS2、HTML5)

取值:0 或 1。该参数的默认值为 1。如果您将参数值设置为 0,则播放器将不会在视频开始播放之前显示视频标题和上传者等信息。

您可以在Google Developers网站上找到所有选项

笔记:

它不会完全删除徽标。左下角还有一个小标志。

showinfo已弃用,2018 年 9 月 25 日之后将被忽略:https : //developers.google.com/youtube/player_parameters

我认为 YouTube 不允许您完全删除他们的名称/徽标。顺便说一下,检查您的网址(在;做什么?)
2021-04-17 07:38:52
感谢您的回复,但我添加了相同的内容。但是在右侧底部悬停时,鼠标悬停和鼠标移开时会出现和消失“youtube”图像或文本。
2021-04-23 07:38:52
当我使用“autohide=1”时,控制栏会被隐藏,右下角有一个“Youtube”图标/图像/标志在悬停时显示。我正在使用 iframe.setAttribute("src", " youtube.com/embed " + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;"); 这。有了这个,我可以从控制栏中删除/隐藏标题栏和徽标,但在右下角有一个其他徽标在悬停时出现在屏幕上,我应该使用哪个参数来隐藏它?
2021-04-24 07:38:52
showinfo参数现已弃用。什么都做不了
2021-05-13 07:38:52
您必须添加 a&来组合参数,而不是&amp;.
2021-05-15 07:38:52

事实证明,这是“控制”参数和“适度品牌”参数之间记录不充分、故意误导或未记录的交互。无法从嵌入的 YouTube 视频中删除 YouTube 的徽标,至少在视频控件公开时是这样。您所要做的就是选择您希望徽标出现的方式和时间。以下是详细信息:

如果controls = 1且modembranding = 1,则YouTube徽标更大,在视频静止图像上作为右下角的灰度水印,并在右下角以大灰度水印形式显示播放控件时。例子: <iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&amp;controls=1&amp&amp;showinfo=0&amp;modestbranding=1" frameborder="0"></iframe>

如果控件 = 1 和适度品牌 = 0(我们在此处更改),则 YouTube 徽标较小,不会作为右下方的灰度水印出现在视频静止图像上,并且仅在控件以白色图标显示时显示右下角。例子: <iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&amp;controls=1&amp&amp;showinfo=0&amp;modestbranding=0" frameborder="0"></iframe>

如果controls = 0,则忽略mediumbranding参数,YouTube标志更大,在视频静止图像上作为右下方的灰度水印,水印出现在播放视频的悬停处,水印出现在下方任何暂停的视频的权利。例子: <iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&amp;controls=0&amp&amp;showinfo=0&amp;modestbranding=1" frameborder="0"></iframe>

显然 YouTube 最近弃用了该showinfo参数:stackoverflow.com/a/52767228/470749
2021-05-04 07:38:52

Youtube 已取消从嵌入的 YouTube 视频中完全删除 YouTube 链接的功能。

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

即使删除了 showinfo 部分,YouTube 也会在暂停视频的右上角放置一个半透明徽标。

删除 YouTube 品牌

迄今为止:看到大量搜索和建议,以禁用嵌入视频中的 YouTube 徽标和品牌;我建议您考虑以下几点:

  1. 我猜 YouTube 不希望您这样做,否则他们会在前端允许这样做。
  2. 一些品牌花费巨大的努力来提供媒体不是 5 分钟。移动。
  3. 拥有标志并尊重品牌权利是件好事。
  4. 您仍然拥有视频,并且可以将其嵌入您的网站/博客中。
  5. 节省一些时间;这是不可能的。
  6. 然而!您可以选择使用以下参数进行适度品牌推广

    https://www.youtube.com/embed/'+videourl+'?modestbranding=1

以及其他一些自定义参数

&showinfo=0 //Turn off Title & Ratings

&showsearch=0 //Turn off Search

&rel=1 //Turn on Related Videos

&iv_load_policy=3 //Turn off Annotations

&cc_load_policy=1 //Force Closed Captions

&autoplay=1 //Turn on AutoPlay (not recommended)

&loop=1 //Loop Playback

&fs=0 //Remove Full Screen Option (not sure why you’d want to)

这是一般的自定义窗口:

如何自定义 YouTube 嵌入

免责声明:我不为 YouTube 工作;只是我尊重版权。

自 2018 年 8 月以来,showinforel参数不起作用,因此建议使用它们的答案不再有效,并且适度品牌不会删除所有徽标

这是我如何隐藏一切的棘手解决方案

  1. 在开始之前,您应该意识到所有 youtube 的信息都贴在 iframe 的顶部和底部(不是视频,这很重要)

  2. 使 iframe 高于实际视频高度。在 iframe 参数中设置高度 = 宽度 * 1.7(或其他乘数)

  3. 使用 iframe 包装元素顶部和底部的绝对位置将 youtube 的信息隐藏在页眉和页脚下。页眉和页脚的高度可以计算为:iframeHeight - (iframeWidth * (9 / 16))) / 2. 如果你想要全屏,你应该将它隐藏在屏幕可见区域之外并将溢出设置为隐藏

  4. 就我而言,我在视频完成后使用 JS 销毁 iframe,因此用户无法看到 youtube 提供的其他视频

  5. 同样重要的注意事项:由于 iOS 12.2 正在用自己的播放器替换 Youtube 的播放器,宽度和高度的计算应该在构造函数中完成(在 React 的情况下),因为 iOS 播放器的到来会导致页面调整大小 -> 可能的宽度和高度重新计算 -> 视频重新渲染 -> 视频暂停

代码示例 jsfiddle.net/s6tp2xfm

此解决方案的一个缺点是它会拉伸图像占位符。

在此处输入图片说明

这就是自定义控件的样子

在此处输入图片说明

@KristinaBressler 如何隐藏顶部和底部,您可以在描述中检查上面 jsfiddle 的链接,计算基于屏幕宽度和视频大小比率。视频的控制是用这个 youtube api developer.google.com/youtube/完成的……但我发现它太复杂了,并在它上面使用了具有相同界面的 React 库(对不起,不记得它的名字了)。进度计算为当前时间/总视频时间
2021-04-17 07:38:52
iframe 响应时如何隐藏顶部和底部?我使用 bootstrap embed 使 iframe 响应。getbootstrap.com/docs/4.1/utilities/embed
2021-04-25 07:38:52
另外,您是如何将自定义控件添加到 youtube 的?例如暂停/播放按钮、音量按钮和视频进程栏。
2021-05-04 07:38:52