Q: How do I embed youtube video as header with autoplay, loop, and hide watch, share, Youtube logo, and video title? 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;
    }


A: 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 style1 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.

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