Question

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

<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徽标）。

Answer 1

可以将&modestbranding=1添加到您的嵌入代码中。

请注意：https://www.youtube.com/watch?v=4NFgV_Et9gY

e.g。

<object width="800" height="450" data="http://www.youtube.com/v/@Model.YoutubeId&rel=0&modestbranding=1"></object>

请注意，当用户的鼠标指针悬停在播放器上时，小的YouTube文字标签仍会显示在暂停视频的右上角。

详细了解YouTube's iFrame Player API。

Answer 2

使用controls=0可以禁用整个控制栏。使用autohide=1控制栏将在视频开始后自动隐藏。

我认为没有选项可以禁用“观看YT”链接。但您可以禁用整个控制栏并自行添加所需的控制按钮。

Answer 3

无法删除控制栏上的Watch on Youtube链接。但是在使用controls=0隐藏控制栏后，您可以使用modestbranding=1删除Youtube水印并在右下角链接。

但您仍然可以看到视频顶部的视频标题链接。可能处于自动隐藏状态。如果您要删除该使用showinfo=0。但是这样做之后会出现Youtube水印和右下角的链接。

Answer 4

默认情况下，您无法隐藏该链接。但是，使用闪存参数可以禁用链接导航。使用allownetworking="internal"。但要注意它会禁用播放器的每个链接设施。

教程和演示：http://www.techtweaker.com/disable-links-on-embedded-youtube-video-code-hack/

Answer 5

working demo link

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

Answer 6

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

可以禁用“在Youtube上观看”链接吗？

6 个答案: