How to hide the bar at the top of "youtube" even when mouse hovers over it?

I am attempting to embed a youtube video, however, I have not discovered a way to keep the bar at the top from showing when the mouse hovers over it. For my purposes it is important that users are not able to have a direct link back to the original video where they can re-watch the video. The following link gives commands for embed features within youtube:

https://developers.google.com/youtube/player_parameters#Overview

I have used the controls and disablekb features to limit viewers ability to skip and replay the video, what I need now is to disable the bar which appears at the top of the video.

(Where I have gotten http://www.youtube.com/embed/bFEoMO0pc7k?controls=0&disablekb=1&egm=1)

Solution 1:

This answer no longer works as YouTube has deprecated the showinfo parameter.

You can hide the embedded player's title bar by adding &showinfo=0. You cannot completely remove all the links to the original video. Here is the best you can do

<iframe width="560" height="315" src="//www.youtube.com/embed/videoid?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>

This code will remove the title bar, YouTube branding in controls, controls (optional, delete controls=0 if you need controls). But a white YouTube logo will be displayed on the video with the video link.

Update 1: Here is a new tool that I built to generate customized youtube embed player code- Advanced Youtube Embed Code Generator

Solution 2:

Since YouTube has deprecated the showinfo parameter you can trick the player. Youtube will always try to center its video but logo, title, watch later button etc.. will always stay at the left and right side respectively.

So what you can do is put your Youtube iframe inside some div:

<div class="frame-container">
   <iframe></iframe>
</div>

Then you can increase the size of frame-container to be out of browser window, while aligning it so that the iframe video comes to the center. Example:

.frame-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */  
    padding-top: 25px;
    width: 300%; /* enlarge beyond browser width */
    left: -100%; /* center */
}

.frame-container iframe {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}

Finnaly put everything inside a wrapper div to prevent page stretching due to 300% width:

<div class="wrapper">
   <div class="frame-container">
      <iframe></iframe>
   </div>
</div>

.wrapper {
   overflow: hidden;
   max-width: 100%;
}

Solution 3:

showinfo=0 Will not work any more as it has been deprecated as of 25/09/2018.

https://developers.google.com/youtube/player_parameters#showinfo

Solution 4:

The following works for me:

?rel=0&fs=0&showinfo=0

Solution 5:

To remove you tube controls and title you can do something like this.

<iframe width="560" height="315" src="https://www.youtube.com/embed/zP0Wnb9RI9Q?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen ></iframe>

check this example how it look

showinfo=0 is used to remove title and &controls=0 is used for remove controls like volume,play,pause,expend.