如何将 youtube 视频嵌入为带有自动播放、循环和隐藏观看、分享、Youtube 徽标和视频标题的标题？

Posted 2023-05-08

【中文标题】如何将 youtube 视频嵌入为带有自动播放、循环和隐藏观看、分享、Youtube 徽标和视频标题的标题？

【英文标题】：How do I embed youtube video as header with autoplay, loop, and hide watch, share, Youtube logo, and video title?

【发布时间】：2019-06-10 20:53:30

【问题描述】：

我正在尝试使用 Youtube 视频制作视频标题。我是 无法隐藏右下角的 Youtube 标志，手表 稍后分享链接在右上角，视频标题在顶部 左角。我成功地让它自动播放和循环。我也有 视频上的文字。有什么建议？

    Here is my current code:

    <!-- html -->
    <div class="embed-responsive embed-responsive-16by9" id="holder">

    <iframe class="frame"   
    src="https://www.youtube.com/embed/4hIZUCKsio0?rel=0&amp; 
    controls=0&amp;showinfo=0;autoplay=1&mute=1&loop=1&playlist=4hIZUCKsio 
    0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; 
    picture- 
    in-picture" allowfullscreen></iframe>


   <div class="bar">
   <div class="container">
   <div class="row justify-content-start">
     <div class="col-sm-8">
        <h1>Hey there! My name is John.<br>
         I'm a Web Developer.</h1>
         <h4>My hobbies include HTML5, CSS3, javascript, jQuery, and Bootstrap 4. 
    </h4>
       </div>

     </div>        
   </div>
   </div>
   </div>

   <!-- CSS -->
   .bar
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:80px;
    margin-top: 200px;
    margin-left: 150px;
    

【问题讨论】：

请澄清edit你的问题：你想嵌入YouTube视频，但隐藏一些元素（如YouTube logo，share link button）基本上嵌入视频中的所有控件？

是的，使用 Youtube 在嵌入下提供的代码嵌入 youtube 视频。但隐藏所有元素（包括 Youtube 标志、分享链接等）。我唯一想展示的是视频本身。谢谢！

【参考方案1】：

要隐藏 YouTube 徽标，您可以添加 modestbranding 参数并将值设置为 1。

从Youtube Player Demo website中找到的show player参数：

modestbranding：阻止 YouTube 徽标显示在控制栏中。

当用户的鼠标指针悬停在播放器上时，仍会显示 YouTube 文本标签或水印

。

突出显示的文字激发了我的灵感：

为了避免用户看到您需要隐藏的元素，您

可以添加一个 css 样式来防止 iframe 中的悬停效果

- 实际上，防止在 div 中出现悬停效果包含 iframe。

我使用此答案“CSS disable hover effect”中添加的代码在包含您的 iframe 的 div 中添加内联样式¹。

所以，结果如下：

<!-- HTML -->
<div class="embed-responsive embed-responsive-16by9" id="holder" style="pointer-events: none;">
   <iframe class="frame"   
      src="https://www.youtube.com/embed/4hIZUCKsio0?rel=0&amp; 
      controls=0&amp;showinfo=0;autoplay=1&mute=1&loop=1&playlist=4hIZUCKsio 
      0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; 
      picture- 
      in-picture" allowfullscreen></iframe>
</div>

此解决方案的唯一缺点是 （当视频第一次播放时），YouTube 徽标、分享链接、视频标题会显示 2-3 秒，然后自动隐藏.

---

¹ 您实际上应该将样式设置为您的 css 规则的一部分。