Styjun

So I'm wondering if there is a way for me to disable the YouTube controls, seekbar, and title (watch later) overlay buttons.

I use the YouTube keyboard shortcuts all the time and when I see the top and bottom overlay slide in, it irritates the crap out of me as it hides useful info behind the semi transparent bars.

I'm using Firefox with Stylish installed but can't seem to find a way to do this.

If you set YouTube to always use the HTML5 player (a good idea anyway), then you can hide the controls using Stylish.

This does the trick:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.youtube.com") 
 .ytp-chrome-bottom, .ytp-chrome-top 
 display: none !important;
 

But be warned:

1. It's probably not possible to hide the Flash player controls. (Don't use Flash anyway.)


2. Using Stylish like this hides the controls at all times -- which I find just as annoying as the controls flashing up at unwanted times.

The easy way to do it is:

• Go to 'share' then click 'embed';


• You get a video preview and just uncheck the relevant options below.

I implement this in chrome, and this method should work in firefox.

Firstly, install an ad blocker extenstion like AdBlocker.

Secondly, open extenstion options interface and add following code snippet to your own filter:

youtube.com###movie_player > div.ytp-gradient-top
youtube.com###movie_player > div.ytp-chrome-top
youtube.com###movie_player > div.ytp-gradient-bottom

Then it wiil work.

An image descrip this:

How to find that filter, it also is easy, open your target website and click F12 key, do this first :

Then construct a formula defined by AdBlocker:

(Website's Host)##(The selector)

and here is:

youtube.com###movie_player > div.ytp-chrome-bottom

It should be noted that you need set the video full screen to find the selector when you want to block the title in full screen mode.

(There may be a grammatical error, but I don’t think it will affect your understanding.)

For Chrome and Stylus:

.html5-video-player.ytp-fullscreen > .ytp-chrome-top,
.html5-video-player.ytp-fullscreen > .ytp-gradient-top,
.html5-video-player.ytp-fullscreen > .ytp-gradient-bottom 
 display: none !important;

.html5-video-player.ytp-fullscreen > .caption-window.ytp-caption-window-bottom 
 margin-bottom: 0;

.html5-video-player.ytp-fullscreen > .ytp-chrome-bottom:hover 
 opacity: 1 !important;

.html5-video-player.ytp-fullscreen > .ytp-chrome-bottom:not(:hover) 
 opacity: 0 !important;

When Fullscreen, the things on top will always hide, player control will be transparent unless the cursor is hover on it, the caption will always near the bottom.