Question

我正在尝试使用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;
    }

Answer 1

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

根据Youtube Player Demo website中的show player参数：

modestbranding：阻止YouTube徽标显示在控制栏中。 当用户的鼠标指针悬停在播放器上时，YouTube文本标签或水印仍会显示。

突出显示的文字激发了我一个主意：

为避免用户看到您需要隐藏的元素，您可以添加css样式以防止iframe中的悬停效果-实际上，可以防止 {{1 }}包含iframe 。

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

因此，结果如下：

div

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

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

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

1 个答案: