0

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;
    }
codingcali
  • 33
  • 2
  • 4
  • Please clarify [edit]ing 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 Jan 17 '19 at 17:50
  • 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 Jan 17 '19 at 18:18

1 Answers1

0

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.

Mauricio Arias Olave
  • 2,259
  • 4
  • 25
  • 70