可以禁用"Watch on Youtube"链接吗?



我正在构建一个应用程序,我在那里嵌入视频和视频剪辑的特定部分。例如,它看起来像这样

<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/

相关内容

  • 没有找到相关文章

最新更新