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

问题描述 投票：43回答：12

我在用

<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”tumbnail /文本即将到来，当我删除鼠标然后它消失。

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

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

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

javascript html5 youtube-iframe-api
12个回答
66
投票

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

modestbranding（支持的玩家：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

1
投票

如果像我一样，你只是希望人们没有使用徽标点击youtube，一个选项是使用像jwplayer这样的播放器。使用jwplayer徽标仍然只是不可点击。

0
投票

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

当然，这意味着视频的底部会被切断。

此外，你很可能会破坏YouTube's Terms of Service。

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>
0
投票

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

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

代码示例jsfiddle.net/xavmd5j9

这个解决方案的缺点是它会占用图像占位符。

附：自2018年8月以来showinfo和rel参数doesn't work所以建议使用它们的答案不再有用，而且模型化不会删除所有徽标

enter image description here

这就是自定义控件的样子

enter image description here

25
投票

事实证明，这是“控制”参数和“适度标记”参数之间缺乏文档记录，故意误导或无记录的交互。至少在视频控件曝光时，无法从嵌入的YouTube视频中删除YouTube徽标。您所要做的就是选择希望徽标出现的方式和时间。以下是详细信息：

如果controls = 1且modestbranding = 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>

如果controls = 1且modestbranding = 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，则忽略modestbranding param并且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>

17
投票

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

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

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

8
投票

删除YouTube品牌

迄今为止：查看大量搜索和建议，以便从嵌入式视频中停用YouTube徽标和品牌广告;我建议你考虑以下几点：

  1. 我猜YouTube不希望你这样做，否则他们会允许你在前端。
  2. 一些品牌花费巨大的努力提供媒体不是5分钟。去除。
  3. 拥有徽标并尊重品牌权利是件好事。
  4. 您仍然拥有将视频嵌入您的网站/博客的视频和奢侈品。
  5. 节省一些时间;这是不可能的。
  6. 然而！您可以选择使用此参数进行Modest-Branding： https://www.youtube.com/embed/'+videourl+'?modestbranding=1

And some other parameters for customization：

&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)

这是一般的自定义窗口：

How to customize YouTube embed

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

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

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

4
投票

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

当然，这样做的权衡是你失去了实际点击视频暂停它的能力。但是如果你想要暂停它的能力，你可以显示控件并让顶层div覆盖到底部30像素左右，让你点击控件。

4
投票

是的它是真的

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.

但我认为你不能同时删除两者

试试两个thnik听到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>

logo hide

2）现在尝试隐藏顶部栏

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

hide top bar

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

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

You tube logo not hide !!

3
投票

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

 <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网址感到困扰，可以帮助您。

2
投票

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

以下是视频的示例源网址：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>

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.