21

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

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

4

8 回答 8

13

这是可能的，只需添加&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。

于 2014-10-02T19:06:48.680 回答
8

我找到了一个没有缺点的可行解决方案：

<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 徽标时视频就会停止。

于 2018-02-24T00:45:03.247 回答
2

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

但是您仍然可以在视频顶部找到带有视频标题的链接。可能处于自动隐藏状态。如果你想删除那个使用showinfo=0. 但是这样做之后，右下角的 Youtube 水印和链接就会出现。

于 2013-10-10T12:11:52.650 回答
1 

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

于 2020-04-29T05:30:32.880 回答
0

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

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

于 2013-12-09T04:44:16.563 回答
0

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

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

于 2013-05-19T19:54:22.533 回答
0

到目前为止，我尝试了几种组合。我找到了隐藏所有指向 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可防止显示“在 YouTube 上观看”链接。
    • 如果您实际上不希望视频自动播放，可以添加 JS 以在视频加载后停止播放。像这样禁用 HTML5 自动播放浏览器扩展。这既可以隐藏链接又可以停止自动播放。
  • 该style属性隐藏了“顶部栏”链接/频道和共享按钮。如果你不关心这个，你就不需要它。不过，单击“共享”按钮可以为用户提供一种在其他地方导航的方式。
  • 在此示例中，该style属性还隐藏了底部的控件。要显示控件，请style="height:400px;改用。但是，这会在视频底部留下一个黑条，并切断视频的顶部。
于 2022-02-09T15:24:49.167 回答
0

工作演示链接 

.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>
于 2020-02-24T07:55:53.303 回答