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

【问题标题】：How do I embed youtube video as header with autoplay, loop, and hide watch, share, Youtube logo, and video title?如何将 youtube 视频嵌入为带有自动播放、循环和隐藏观看、分享、Youtube 徽标和视频标题的标题？
【发布时间】：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" width="560" height="315" 
    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 标志、分享链接等）。我唯一想展示的是视频本身。谢谢！

标签： video iframe youtube header embed

【解决方案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" width="560" height="315" 
      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 规则的一部分。

【讨论】：