Is there a way to hide YouTube controls completely while in full screen?

user_5203485 0
Viewed 17012

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.

stylish firefox youtube
5 Answers

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: block title when full screen

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

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.)

user_107538000

It worked after adding these in Ublock Origin Filters:

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

Need Stylus.

In fullscreen, controls will be hidden unless mouse over the botton area.

.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 > .ytp-caption-window-container > .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;
}
user_23604780
Related