Html 在网页中嵌入视频后如何删除 youtube 品牌?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18893902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove youtube branding after embedding video in web page?
提问by eegloo
I am using
我在用
<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
This removes right side bottom "Youtube" Logo. And also removes "Title bar" which appears on hover.
这将删除右侧底部的“Youtube”徽标。并且还删除了悬停时出现的“标题栏”。
But in this problem is, When I hover on video then behind the right side bottom "Youtube" tumbnail / Text is coming and when I remove mouse then it disappears.
但在这个问题中,当我将鼠标悬停在视频上时,然后在右侧底部“Youtube”缩略图/文本后面,当我移除鼠标时,它就会消失。
When I use "autohide=1" then control bar gets hidden and in the right-bottom corner there is one icon/image/logo of "Youtube" display on hover. I am using
当我使用“autohide=1”时,控制栏被隐藏,并且在右下角有一个“Youtube”图标/图像/徽标悬停显示。我在用
iframe.setAttribute("src", "youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;");
this. With this I am able to remove/hide Title bar and logo from the control bar but on right-bottom there is one other logo comes on screen on hover , which parameter should I use to hide that?
这个。有了这个,我可以从控制栏中删除/隐藏标题栏和徽标,但在右下角有一个其他徽标在悬停时出现在屏幕上,我应该使用哪个参数来隐藏它?
回答by Stephan Vierkant
You can add ?modestbranding=1
to your url. That will remove the logo.
您可以添加?modestbranding=1
到您的网址。这将删除徽标。
modestbranding (supported players: AS3, HTML5)
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
适度品牌(支持的播放器:AS3、HTML5)
此参数可让您使用不显示 YouTube 徽标的 YouTube 播放器。将参数值设置为 1 可防止 YouTube 徽标显示在控制栏中。请注意,当用户的鼠标指针悬停在播放器上时,一个小的 YouTube 文本标签仍会显示在暂停视频的右上角。
&showinfo=0
will remove the title bar.
&showinfo=0
将删除标题栏。
showinfo (supported players: AS3, AS2, HTML5)
Values: 0 or 1. The parameter's default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.
showinfo(支持的播放器:AS3、AS2、HTML5)
取值:0 或 1。该参数的默认值为 1。如果将参数值设置为 0,则播放器将不会在视频开始播放之前显示视频标题和上传者等信息。
You can find all options on the Google Developerswebsite.
您可以在Google Developers网站上找到所有选项。
Note:
笔记:
It doesn't fully remove the logo. There is still a small logo on the bottom left.
它不会完全删除徽标。左下角还有一个小标志。
showinfo
is deprecated and will be ignored after September 25, 2018: https://developers.google.com/youtube/player_parameters
showinfo
已弃用,2018 年 9 月 25 日之后将被忽略:https: //developers.google.com/youtube/player_parameters
回答by Freeman
It turns out this is either a poorly documented, intentionally misleading, or undocumented interaction between the "controls" param and the "modestbranding" param. There is no way to remove YouTube's logo from an embedded YouTube video, at least while the video controls are exposed. All you get to do is choose how and when you want the logo to appear. Here are the details:
事实证明,这是“控制”参数和“适度品牌”参数之间记录不充分、故意误导或未记录的交互。无法从嵌入的 YouTube 视频中删除 YouTube 的徽标,至少在视频控件公开时是这样。您所要做的就是选择您希望徽标出现的方式和时间。以下是详细信息:
If controls = 1 and modestbranding = 1, then the YouTube logo is bigger, is on the video still image as a grayscale watermark in the lower right, and shows when the play controls are exposed as a big gray scale watermark in the lower right. example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
如果controls = 1且modembranding = 1,则YouTube徽标更大,在视频静止图像上作为右下角的灰度水印,并在右下角以大灰度水印显示播放控件时。例子:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
If controls = 1 and modestbranding = 0 (our change here), then the YouTube logo is smaller, is not on the video still image as a grayscale watermark in the lower right, and shows only when the controls are exposed as a white icon in the lower right. example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=0" frameborder="0"></iframe>
如果控件 = 1 和适度品牌 = 0(我们在此处更改),则 YouTube 徽标较小,不会作为右下方的灰度水印出现在视频静止图像上,并且仅在控件以白色图标显示时显示右下角。例子:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=0" frameborder="0"></iframe>
If controls = 0, then the modestbranding param is ignored and the YouTube logo is bigger, is on the video still image as a grayscale watermark in the lower right, the watermark appears on hover of a playing video, and the watermark appears in the lower right of any paused video. example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=0&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
如果controls = 0,则忽略mediumbranding参数,YouTube标志更大,在视频静止图像上作为右下方的灰度水印,水印出现在播放视频的悬停处,水印出现在下方任何暂停的视频的权利。例子:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=0&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
回答by atw
Youtube have removed the ability to completely remove a YouTube link form an embedded YouTube video.
Youtube 已取消从嵌入的 YouTube 视频中完全删除 YouTube 链接的功能。
https://developers.google.com/youtube/player_parameters#modestbranding
https://developers.google.com/youtube/player_parameters#modestbranding
Even by removing the showinfo section YouTube places a semi transparent logo in the upper right hand corner of a paused video.
即使删除了 showinfo 部分,YouTube 也会在暂停视频的右上角放置一个半透明徽标。
回答by wpcoder
Remove YouTube Branding
移除 YouTube 品牌
To date:Seeing a lot of searches and suggestions to disable YouTube logo and branding from an embedded video; I recommend you consider the following:
迄今为止:看到大量搜索和建议,以禁用嵌入视频中的 YouTube 徽标和品牌;我建议您考虑以下几点:
- I guess YouTube don't want you to do this otherwise they would allow that at their front end.
- Some brands spending huge efforts to provide the media not for a 5 min. removal.
- It's good to have the logo and respects brands rights.
- You still have the video and the luxury of embedding it in your site/blog.
- Spare some of your time; that is not possible.
Yet! You have the option of having Modest-Brandingusing this parameters:
https://www.youtube.com/embed/'+videourl+'?modestbranding=1
- 我猜 YouTube 不希望您这样做,否则他们会在前端允许这样做。
- 一些品牌花费巨大的努力来提供媒体不是 5 分钟。移动。
- 拥有标志并尊重品牌权利是件好事。
- 您仍然拥有视频并可以将其嵌入您的网站/博客中。
- 节省一些时间;这是不可能的。
然而!您可以选择使用以下参数进行适度品牌推广:
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)
And here is the general customization window:
这是常规自定义窗口:
Disclaimer: I don't work for YouTube; simply I respect the copyrights.
免责声明:我不为 YouTube 工作;只是我尊重版权。
回答by Jayman Jani
Yes It it True
是的,这是真的
1)By modestbranding=1 to your url. That will remove the logo that is appered in bottom lest as branding and
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.
2)By &showinfo=0 will remove the title bar.
But I think You Can not Remove Both Think together
但我认为你不能删除两者一起思考
Just try Both thnik hear http://codegena.com/generator/Youtube-Embed-Code-Generator
试试吧 两个 thnik 听到 http://codegena.com/generator/Youtube-Embed-Code-Generator
1) when try hide logo
1) 尝试隐藏徽标时
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1"frameborder="0"></iframe>
2)Now try to hide topbar
2)现在尝试隐藏顶栏
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&showinfo=0"frameborder="0"></iframe>
==>But Now When We try to hide Both Information See the Limitation
==>但是现在当我们试图隐藏这两个信息时,请参阅限制
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1&showinfo=0"frameborder="0"></iframe>
回答by Dmitriy Sakhno
Since August 2018 showinfoand relparameter doesn't workso answers which recommend to use them no longer works and modestbrandingdo not remove all logos
自 2018 年 8 月以来,showinfo和rel参数不起作用,因此建议使用它们的答案不再起作用,并且适度品牌不会删除所有徽标
here is my tricky solution how to hide EVERYTHING
这是我如何隐藏一切的棘手解决方案
Before you start you should realize that all youtube's info are sticks to the top and bottom of iframe(not video, that's important)
Make iframe higher than real video height. In iframe parameters set height = width * 1.7 (or other multiplicator)
Hide youtube's info under your header and footer with an absolute position at top and bottom of iframe wrapper element. Height of header and footer could be calculated as: iframeHeight - (iframeWidth * (9 / 16))) / 2. If you want fullscreen than you should hide it outside screen visible zone and set overflow to hidden
In my case I use JS to destroy iframe after video is finished so user couldn't see youtube's offer with another videos
Also important note: since iOS 12.2 is replacing Youtube's player by their own, width and height calculation should be done in constructor(in case of React) because iOS player arrival cause page resize ->possible width&height recalculation-> video rerender -> video pause
在开始之前,您应该意识到所有 youtube 的信息都贴在 iframe 的顶部和底部(不是视频,这很重要)
使 iframe 高于实际视频高度。在 iframe 参数中设置高度 = 宽度 * 1.7(或其他乘数)
使用 iframe 包装元素顶部和底部的绝对位置将 youtube 的信息隐藏在页眉和页脚下。页眉和页脚的高度可以计算为: iframeHeight - (iframeWidth * (9 / 16))) / 2. 如果你想要全屏,你应该将它隐藏在屏幕可见区域之外并将溢出设置为隐藏
就我而言,我在视频完成后使用 JS 销毁 iframe,因此用户无法看到 youtube 提供的其他视频
同样重要的一点:由于 iOS 12.2 正在用自己的播放器替换 Youtube 的播放器,宽度和高度的计算应该在构造函数中完成(在 React 的情况下),因为 iOS 播放器的到来会导致页面调整大小 -> 可能的宽度和高度重新计算 -> 视频重新渲染 -> 视频暂停
code example jsfiddle.net/s6tp2xfm
代码示例 jsfiddle.net/s6tp2xfm
A disadvantage of this solution is that it stretches image placeholder.
此解决方案的一个缺点是它会拉伸图像占位符。
that's how it could look like with custom controls
这就是自定义控件的样子
回答by KingBriskey.com
autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=2&showinfo=1
That worked for me, it still showed subscribe and it showed share link, but no youtube button to take them off the page to another. So that's the line I will use that I think will keep traffic my site and not take off to all the other sites.
这对我有用,它仍然显示订阅并显示共享链接,但没有youtube按钮将它们从页面上移到另一个页面。所以这就是我将使用的线路,我认为这将保持我网站的流量,而不是转移到所有其他网站。
回答by udhay
It would be Better if you can use html5 video player or any other player (but not jwplayer) which can play youtube source video.
如果您可以使用 html5 视频播放器或任何其他可以播放 youtube 源视频的播放器(但不是 jwplayer),那就更好了。
Below is an example source url of a video: 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
以下是视频的示例源 url:https: //redirector.googlevideo.com/videoplayback?requiressl=yes&id=a1385c04a9ecb45b&itag=22&source=picasa &cmo=secure_transport%3Dyes&ip=0.0.0.0&ipbits=046requiressl=yes&id=a1385c04a9ecb45b&itag=22&source=picasa &cmo=secure_transport%3Dyes&ip=0.0.0.0&ipbits=0&expire%2dCparams %2Csource%2Cip%2Cipbits%2Cexpire&signature=86FE7D007A1DC990288890ED4EC7AA2D31A2ABF2.A0A23B872725261C457B67FD4757F3EB856Aeh1E
Open this using simple html5 video player (Replace XXXXXX with source url or any downloadable url) :
使用简单的 html5 视频播放器打开它(用源 url 或任何可下载的 url 替换 XXXXXX):
<video width="640" height="480" autoplay controls>
<source src="XXXXXX" type="video/mp4">
</video>
You can also use many other video players also.
您还可以使用许多其他视频播放器。
回答by Arien Freymuth
That watermark in the bottom right only appears on mouseover
. There's no parameter to remove that, however if you stack a transparent div
on top of the video and make it a higher z-index
and the same size of the video, your mouseover
will not trigger the watermark because your mouse will be hitting the div
.
右下角的水印只出现在 上mouseover
。没有参数可以删除它,但是如果您div
在视频顶部堆叠透明并使其更高z-index
且与视频大小相同,您mouseover
将不会触发水印,因为您的鼠标将击中div
.
Of course the tradeoff for this is that you lose the ability to actually click on the video to pause it. But if you want to leave the ability to pause it, you could display the controls and have the top layer div
cover up until the bottom 30 pixels or so, letting you click the controls.
当然,这样做的代价是您失去了实际单击视频以暂停它的能力。但是,如果您想保留暂停功能,您可以显示控件并将顶层div
覆盖到底部 30 像素左右,让您单击控件。
回答by Bedi Egilmez
I tried this, but it is not possible to remove "Watch on YouTube" icon. Following solution of mine does not remove the icon itself but "blocks" the mouse hover so that watch on YouTube is not click-able. I added a div over icon, so no mouseover will be affected for that logo.
我试过了,但无法删除“在 YouTube 上观看”图标。我的以下解决方案不会删除图标本身,而是“阻止”鼠标悬停,因此无法在 YouTube 上观看。我添加了一个 div over 图标,因此该徽标不会影响鼠标悬停。
<div class="holder">
<div class="frame" id="player" style="height 350"></div>
<div class="bar" id="bottom-layer">.</div>
</div>
Where frame is my embedded player. include following to your css file
其中 frame 是我的嵌入式播放器。将以下内容包含到您的 css 文件中
.holder{
position:relative;
width:640px;
height:350px;
}
.frame{
width: 100%;
height:100%;
}
.bar{
position:absolute;
bottom:0;
right:0;
width:100%;
height:40px;
}
This is not full solution but helps you if you are bothered with users' getting full youtube url.
这不是完整的解决方案,但如果您对用户获取完整的 youtube 网址感到困扰,它会为您提供帮助。