How do I embed youtube video as header with autoplay, loop, and hide watch, share, Youtube logo, and video title?

Question

I am trying to make a video header using a Youtube video. I am having trouble hiding the Youtube Logo in bottom right corner, the Watch later and Share links in top right corner, and the video title in top left corner. I was successful in making it autoplay and loop. I also have text over the video. Any suggestions?

    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;
    }

Please clarify editing your question: do you want embed a YouTube video, but hidding some elements (like the YouTube logo, the share link button) and basically all controls from the embed video? — Mauricio Arias Olave
Yes, embed the youtube video using the code Youtube provides under embed. But hide all of the elements(including Youtube logo, share link etc...). The only thing I want to show is the video itself. Thanks ! — codingcali

Mauricio Arias Olave Mauricio Arias Olave · Accepted Answer · 2019-01-18T21:24:29

For hide the YouTube logo, you can add the modestbranding parameter and set the value to 1.

From the show player parameters found in the Youtube Player Demo website:

modestbranding: Prevent the YouTube logo from displaying in the control bar. A YouTube text label or watermark still displays when the user's mouse pointer hovers over the player.

The highlighted text sparks me an idea:

For avoid user see the elements you need to hide, you can add a css style for prevent the hover effect in the iframe - actually, prevent the hover effect in the div that contains the iframe.

I used the code added in this answer "CSS disable hover effect" for add an inline style¹ in the div which contains your iframe.

So, the results is as follows:

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

The only downside with this solution is that (when the video plays for the very first time), the YouTube logo, share link, video title and will show for 2-3 seconds before hide automatically.

¹ You should actually set the style as part of your css rulings.

How do I embed youtube video as header with autoplay, loop, and hide watch, share, Youtube logo, and video title?

1 Answers