我正在构建一个应用程序,我在那里嵌入视频和视频剪辑的特定部分。例如,它看起来像这样
<iframe width="640" height="360" src="https://www.youtube.com/embed/pftnJbQjSBA&modestbranding=1&showinfo=0&autoplay=1&controls=0&modestbranding=1&disablekb=1&rel=0&start=10&end=20" frameborder="0"></iframe>
是否可以禁用"观看youtube"链接,这样用户就不会在其他地方导航了。只是要清楚,我只想控制流,而视频正在观看(即不试图干扰广告或YouTube标志)。
这是可能的,只需添加&modestbranding=1
到您的嵌入代码。
看这个:https://www.youtube.com/watch?v=4NFgV_Et9gY
。
<object width="800" height="450" data="http://www.youtube.com/v/@Model.YoutubeId&rel=0&modestbranding=1"></object>
请注意,当用户的鼠标指针悬停在播放器上时,一个小的YouTube文本标签仍将显示在暂停视频的右上角。
了解更多关于YouTube的iFrame Player API。
我找到了一个没有缺点的有效解决方案:
<iframe
width="640"
height="390"
src="https://www.youtube.com/embed/VgC4b9K-gYU"
sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation">
</iframe>
键是沙箱属性。你只需要限制弹出窗口,现在视频只是停止当你点击youtube的标志。
无法在控制栏上删除Watch on Youtube
链接。但是在你用controls=0
隐藏控制条之后,你可以用modestbranding=1
删除Youtube水印和右下角的链接。
但是在视频顶部仍然有一个带有视频标题的链接。可能是自动隐藏状态。如果你想删除,使用showinfo=0
。但是这样做之后,右下角的Youtube水印和链接就会出现。
<div style="height:400px; width:400px; overflow: hidden;">
<iframe width="400px" src="https://www.youtube.com/embed/ziEtst55R4s?theme=dark&autoplay=1&autohide=0&cc_load_policy=1&modestbranding=1&fs=0&showinfo=0&rel=0&iv_load_policy=3&mute=0&loop=1" style="height:400px; background:#000000; bottom: 60px; position: relative;"
sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation">
</iframe>
</div>
视频工作链接用户应该意识到沙箱是可选的,以便禁用所有链接。我添加了沙盒代码,因为在链接中额外的youtube链接是禁用的。在这个例子中,标题是隐藏的,也防止原始标题被溢出隐藏div显示。https://shareallweb.com/discussions/index.php?media/john-parr-naughty-naughty-official-music-video.146/使用controls=0
可以禁用整个控制栏。使用autohide=1
,控制栏将在视频开始后自动隐藏。
我不认为有一个选项可以直接禁用"Watch on YT"链接。但是你可以禁用整个控制栏,然后自己添加所需的控制按钮。
工作演示链接
.container {
position: relative;
width: 500px;
height: 500px;
}
.image {
display: block;
width: 100%;
height: 60%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 50%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: Red;
font-size: 20px;
position: absolute;
bottom: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
<div class="container">
<iframe width="800" height="500" src="https://www.youtube.com/embed/cRkaPdfjzEk?rel=0;&autoplay=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" class="image" allowfullscreen style="border:0px solid red;" > </iframe>
<div class="overlay">
</div>
<div id="pig" style="background-color: opacity: 1; width: 100%;" class="text"> Click here to play</div>
</div>
它基本上是添加了一个图像叠加,同时仍然保持控制面板在底部。 <style>
.container {
position: relative;
width: 500px;
height: 500px;
}
.image {
display: block;
width: 100%;
height: 60%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 50%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: Red;
font-size: 20px;
position: absolute;
bottom: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
</style>
<div class="container">
<iframe width="800" height="500" src="https://www.youtube.com/embed/cRkaPdfjzEk?
rel=0;&autoplay=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-
media; gyroscope; picture-in-picture" class="image" allowfullscreen
style="border:0px solid red;" > </iframe>
<div class="overlay">
</div>
<div id="pig" style="background-color: opacity: 1; width: 100%;" class="text"> Click
here to play</div>
</div>
目前为止,我尝试了一些组合。我找到了一种方法来隐藏所有到YouTube的链接,以及分享链接。
你可能想玩的宽度和高度值,以适应您的视频。但是如果你改变了它们,你就需要检查边缘的链接,因为如果你稍微关闭了一些,共享链接可能会在边缘的1px处被点击。
<div style="height:351px; width:625px; overflow: hidden;">
<iframe height="351" width="625"
src="https://www.youtube.com/embed/XXXXXXXX?theme=dark&autoplay=1&keyboard=1&autohide=2&cc_load_policy=1&modestbranding=1&fs=0&showinfo=0&rel=0&iv_load_policy=3&mute=0&loop=0"
sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation"
style="height:471px; background:#000000; bottom: 61px; position: relative;"
frameborder="0">
</iframe>
</div>
我使用了Youtube嵌入代码生成器,并将其与这里的代码相结合:如何禁用嵌入视频的Youtube标题链接。
-
sandbox
属性阻止点击YouTube链接。 - 在URL中使用
autoplay=1
会阻止"Watch on YouTube"链接从显示。- 如果你不想让视频自动播放,可以添加JS,在视频加载后停止播放。禁用HTML5自动播放浏览器扩展。这可以隐藏链接并停止自动播放。
-
style
属性隐藏了"顶部栏"链接/频道和分享按钮。如果你不在乎这些,你就不需要它。点击分享按钮可以为用户提供一种导航到其他地方的方式。 - 在本例中,
style
属性还隐藏了底部的控件。要显示控件,请使用style="height:400px;
。但是,这会在视频的底部留下一个黑条,并切断视频的顶部。
默认情况下无法隐藏该链接。然而,使用flash参数,你可以禁用链接从导航。使用allownetworking="internal"
。但要注意,它将禁用播放器的每个链接设施。
教程和演示:http://www.techtweaker.com/disable-links-on-embedded-youtube-video-code-hack/