Brtdku

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;

    }

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.