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

Question

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)

Answer 1

Still working in 2023: :)

Responsive embed with no info/controls including hiding the avatar and title on start/pause working 2021. Similar to a previous answer but making use of aspect-ratio instead of a padding hack and with a working demo.

If you need controls, you can make your own using the JS API. No matter how you embed a YouTube video though, it will always be possible to find it in the source one way or another.

CodePen Demo

<div class="youtube-container">
    <iframe src="https://www.youtube.com/embed/WhY7uyc56ms?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=WhY7uyc56ms" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.youtube-container {
    overflow: hidden;
    width: 100%;
    /* Keep it the right aspect-ratio */
    aspect-ratio: 16/9;
    /* No clicking/hover effects */
    pointer-events: none;
} 

.youtube-container iframe {
    /* Extend it beyond the viewport... */
    width: 300%;
    height: 100%;
    /* ...and bring it back again */
    margin-left: -100%;
}

Answer 2

Answer in present situation is that youtube change policy since August 23, 2018 and effective since September 25, 2018 so they are now allow to hide info.

Answer 3

As mentioned by other answers the showinfo=0 query parameter no longer works. YouTube always provides access to the video URL when using the iframe embed method.

One way to work around this is to cover the player entirely with a separate player. Plyr for example does this.

In the case of WordPress there are dedicated plugins for preventing access to the video, such as Protected Video.

Answer 4

What I did to disable the hover state of the iframe, was to use pointer-events:none in a css style. It shows the info on load, but after that hover shouldn't trigger showing the info.

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

You can try this it has worked for me.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/PEwac2WZ7rU?rel=0?version=3&autoplay=1&controls=0&&showinfo=0&loop=1"></iframe>
</div>

Responsive embed using Bootstap

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Style youtube video:

• Select a youtube video, click on Share and then Embed.
• Select the embed code and copy it.
• Start modifying after the verison=3 www.youtube.com/embed/VIDEOID?rel=0?version=3
• Be sure to add a '&' between each item.
• For autoplay: add "autoplay=1"
• For loop: add "loop=1"
• Hide the controls: add "controls=0"

For more information please visit this link https://developers.google.com/youtube/player_parameters#autoplay

Thanks
BanyanTheme

Answer 9

The following works for me:

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

Answer 10

Open youtube video. Click on share option. In share option click on embed tag. You can see in embed tag there is some check box. Unchecked on show video title and player actions. After this just copy frame tag.

<iframe width="100%" height="350" src="https://www.youtube.com/embed/uqhnxAjK7qY?autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>