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

Question

我在用

<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;");

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

考虑红色方块标记部分

score 88 · Accepted Answer

您可以添加?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

score 27 · Accepted Answer

事实证明，这要么是记录不充分、故意误导，要么是“controls”参数和“modestbranding”参数之间没有记录的交互。无法从嵌入的 YouTube 视频中删除 YouTube 的徽标，至少在视频控件暴露时是这样。您所要做的就是选择您希望徽标出现的方式和时间。以下是详细信息：

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

如果controls = 1 和moderatebranding = 0（我们在这里的更改），那么YouTube 徽标会更小，不会在视频静止图像上作为右下角的灰度水印，并且仅在控件显示为白色图标时显示右下角。例子： <iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&amp&showinfo=0&modestbranding=0" frameborder="0"></iframe>

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

score 19 · Accepted Answer

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

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

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

score 13 · Accepted Answer

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

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

在开始之前，您应该意识到所有 youtube 的信息都贴在 iframe 的顶部和底部（不是视频，这很重要）
使 iframe 高于真实视频高度。在 iframe 参数中设置 height = width * 1.7 （或其他乘数）
将 youtube 的信息隐藏在您的页眉和页脚下，并在 iframe 包装器元素的顶部和底部具有绝对位置。页眉和页脚的高度可以计算为：iframeHeight - (iframeWidth * (9 / 16))) / 2. 如果您想要全屏，则应将其隐藏在屏幕可见区域之外并将溢出设置为隐藏
在我的情况下，我在视频完成后使用 JS 销毁 iframe，因此用户无法看到 youtube 提供的其他视频
同样重要的注意事项：由于 iOS 12.2 正在用自己的播放器替换 Youtube 的播放器，因此应在构造函数中完成宽度和高度计算（在 React 的情况下），因为 iOS 播放器到达会导致页面调整大小 -> 可能的宽度和高度重新计算 -> 视频重新渲染 -> 视频暂停

代码示例 jsfiddle.net/s6tp2xfm

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

这就是自定义控件的样子

score 11 · Accepted Answer

移除 YouTube 品牌

迄今为止：看到大量搜索和建议从嵌入式视频中禁用 YouTube 徽标和品牌；我建议你考虑以下几点：

我猜 YouTube 不希望您这样做，否则他们会在前端允许这样做。
一些品牌花费巨大的精力来提供媒体而不是 5 分钟。移动。
拥有标志并尊重品牌权利是件好事。
您仍然拥有视频以及将其嵌入您的网站/博客的奢侈。
腾出一些时间；这是不可能的。
然而！您可以选择使用以下参数进行Modest-Branding ：

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 工作；只是我尊重版权。}

score 6 · Accepted Answer

是的，它是真的

1)By modestbranding=1 to your url. That will remove the logo that is appered in bottom lest as branding and

2)By &showinfo=0 will remove the title bar.

但我认为你不能删除两者一起思考

只需尝试两者都可以听到 http://codegena.com/generator/Youtube-Embed-Code-Generator

1) 尝试隐藏徽标时

<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1"frameborder="0"></iframe>

2）现在尝试隐藏顶栏

<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&showinfo=0"frameborder="0"></iframe>

==>但是现在当我们试图隐藏这两个信息时，请参阅限制

<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1&showinfo=0"frameborder="0"></iframe>

score 3 · Accepted Answer

如果您可以使用 html5 视频播放器或任何其他可以播放 youtube 源视频的播放器（但不是 jwplayer）会更好。

以下是视频的示例源网址： https ://redirector.googlevideo.com/videoplayback?requiressl=yes&id=a1385c04a9ecb45b&itag=22&source=picasa&cmo=secure_transport%3Dyes&ip=0.0.0.0&ipbits=0&expire=1440066674&sparams=requiressl%2Cid%2Citag %2Csource%2Cip%2Cipbits%2Cexpire&signature=86FE7D007A1DC990288890ED4EC7AA2D31A2ABF2.A0A23B872725261C457B67FD4757F3EB856AEE0E&key=lh1

使用简单的 html5 视频播放器打开它（将 XXXXXX 替换为源 url 或任何可下载的 url）：

    <video width="640" height="480" autoplay controls>
  <source src="XXXXXX" type="video/mp4">
 </video>

您还可以使用许多其他视频播放器。

score 3 · Accepted Answer

 autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=2&showinfo=1

这对我有用，它仍然显示订阅并显示共享链接，但没有 youtube 按钮可以将它们从页面上移到另一个页面。所以这就是我将使用的线路，我认为这将保持我的网站的流量，而不是起飞到所有其他网站。

score 3 · Accepted Answer

右下角的那个水印只出现在mouseover. 没有参数可以删除它，但是如果您div在视频顶部堆叠透明并使其更高z-index且与视频大小相同，您mouseover将不会触发水印，因为您的鼠标将点击div.

当然，这样做的代价是您失去了实际单击视频以暂停它的能力。但是，如果您想保留暂停功能，您可以显示控件并让顶层div覆盖到底部 30 像素左右，让您单击控件。

score 2 · Accepted Answer

如果像我一样，您只是希望人们不使用徽标点击 youtube，则一种选择是使用 jwplayer 之类的播放器。使用 jwplayer 徽标仍然存在，只是无法点击。

score 1 · Accepted Answer

我试过了，但无法删除“在 YouTube 上观看”图标。我的以下解决方案不会删除图标本身，而是“阻止”鼠标悬停，以便在 YouTube 上观看不可点击。我在图标上添加了一个 div，因此该徽标不会影响鼠标悬停。

 <div class="holder">
     <div class="frame" id="player" style="height 350"></div>
     <div class="bar" id="bottom-layer">.</div>
 </div>

我的嵌入式播放器在哪里框架。在您的 css 文件中包含以下内容

.holder{
position:relative;
width:640px;
height:350px;
}

.frame{
width: 100%;
height:100%;
}

.bar{
position:absolute;
bottom:0;
right:0;
width:100%;
height:40px;
}

这不是完整的解决方案，但如果您对用户获取完整的 youtube 网址感到困扰，它会为您提供帮助。

score 0 · Accepted Answer

删除 YouTube 品牌（同时保持视频可点击）的唯一方法是将嵌入 iFrame 放置在已overflow设置为hidden且高度略小于 iFrame 的容器中。

当然，这意味着您的视频的底部被切掉了。

此外，您很可能违反了 YouTube 的服务条款。

CSS：

.videoWrapper {
  width: 550px;
  height: 250px;
  overflow: hidden;
}

HTML：

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

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

12 回答 12

笔记：

移除 YouTube 品牌

Related

Reference