The video bar on YouTube is supposed to help users to control the video easily and it only appears when a pointer hovers above it or when the video is paused.
However, for those who demand a fullscreen experience might get annoyed by the existence of a YouTube video bar. So, is there any way to hide the bar when the video is paused?
Despite there’s no known extension that can support this ability, a specialized script can help us disable the YouTube video bar anytime we want!
…and it’s easy to implement!
In this tutorial, I’m using Google Chrome as a reference. You may use different browsers if you want. The script should work fine on most major browsers.
Table of Contents
How to hide Youtube video bar
1. Go to a new tab in Chrome (CTRL+T).
2. Right-click on the bookmark bar (below the address bar) and then select Add page…
3. Name the new bookmark. For example, I use “Youtube Full” as the Name. Copy the script below for the URL, make sure you select the Bookmarks bar, then click Save.
javascript:(function(){var goaway=".ytp-chrome-top,.ytp-chrome-bottom{display:none;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})();
4. You should notice a new bookmark appear on the bookmark bar like this.
5. Go to any YouTube video.
6. Click on the bookmark you just made. If you can’t see the bookmark bar, press CTRL+SHIFT+B.
7. Now, the video bar is gone, even when the video is paused.
Of course, it would be very hard to control the video without the presence of a video bar. That’s why these keyboard shortcuts are so important to remember.
| Keyboard shortcut | Function |
|---|---|
| F | Fullscreen mode |
| T | Theater/default view |
| I | Mini player |
| Spacebar/K | Pause/play video |
| M | Mute/unmute video |
| Arrow Up | Increase volume |
| Arrow Down | Decrease volume |
| Arrow Left | Go back 5 seconds |
| Arrow Right | Go forward 5 seconds |
| Shift+N | Continue to the next video |
To show the YouTube bar again, you only need to reload the page, and everything will go back to normal.
If you want to take a screenshot from YouTube videos at fullscreen without the existence of a video bar, check out my previous guide about 3 Easy Ways to Take a Screenshot from YouTube Video at Full Resolution.
Hide YouTube controls using a browser extension
Browser extensions like Hide YouTube Controls or Hyde for both Firefox and Chrome offer the easiest way to hide the YouTube bar.
These extensions add a keyboard shortcut, like Ctrl+M, to toggle hiding the YouTube controls. When enabled, the extensions will hide the progress bar and controls even when a video is paused.
Conclusion
In conclusion, hiding the YouTube bar when a video is paused can be done using browser extensions or JavaScript. Browser extensions like “Hide YouTube Controls” or “Hyde” offer the easiest way to hide the bar, while JavaScript bookmarklets can be used to toggle hiding the bar.
Once hidden, the YouTube controls will be inaccessible, so keyboard shortcuts are essential for controlling the video playback.
Christian, love the ‘How to hide Youtube video bar’ tip.
Can another shortcut be created to unhide the video bar while video is playing?
If possible what will the javascript string be?
Sorry, I got the code from a third-party source. Perhaps you may discuss that question on more advanced sites such as Stack Overflow or Google Chrome Community.
Thanks for visiting anyway 🙂
To unhide: javascript:(function(){var goaway=”.ytp-chrome-top,.ytp-chrome-bottom{display:block;}”;if(“\v”==”v”){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement(“style”);tag.type=”text/css”;document.getElementsByTagName(“head”)[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance==”string”)?”innerText”:”innerHTML”]=goaway}})();
Perfect! This is what I wanted. Easy and simple to apply. Thanks a lot.
In Firefox, you can turn on “picture-in-picture” mode in the settings, while on the Youtube page, you’ve to toggle the “picture-in-picture” icon to active it. There’s only a small graphical icon for the pause button at the bottom center but it’s much better and you can return back without reloading the page. All the usual shortcuts like backward, forward, vol-up-down and pause/play works, as a bonus you get an option to play videos in the foreground, stacked in a corner while you read an article, play games (borderless mode) or whatever.
Doesn’t seem to work in Vivaldi. Dropping the text onto the bookmarks bar has no result.
Hey, thank you so much, Christian Wijaya! I just figured it was impossible, which has been kind of a bummer when it comes to screen caps. Big help, dude!
Thank you so much, Christian Wijaya. I just figured it was impossible — which has been a bummer when it comes to screen caps, for instance. Big help, my man!
Thank you so much, exactly what I was looking for!
The time bar spoils me very often, by the remaining length of the video, when watching sports games.
Infinite love for you my friend!
thank you soooooo much!!! this helped me a lot. thanks again!
WOW – This WORKS equally well in FIREFOX!
Adding in this in Firefox:
A. First you need the Bookmarks bar to be showing (I recommend always sowing it)
A-1. Press Alt
A-2. Go to View -> Toolbars -> Menu bar (not your menu bar stays up)
A-3 Go to View -> Toolbars -> Bookmarks Toolbar -> Always Show
B. Now you can add the Bookmark and Script
B-1. Right-click anywhere on the bookmark bar, or any folders on the bookmark bar
B-2. Click “Add Bookmark”
B-3. Name the Bookmark whatever you want under “Name”
B-4: Under “URL” simply PASTE THE SCRIPT into that URL field.
B-5: Click “Save” and you are DONE.
Works just fine in Firefox ESR 94.11 that I use.
Thanks to the author, this is awesome for screenshots.
WELL DONE MY FRIEND!
@SANDER You are over complicating the issue. ALL i had to do was paste the same script into a new bookmark’s URL field, and it worked perfectly. (Right-click bookmark bar -> “Add Bookmar” -> Name it whatever -> Paste the script into the URL field).
I use Firefox ESR, as I recommend every do, especially if you work in a company as their System Administrator. But it also superior on home-PC’s if you are a power, and don’t like things like Mac computers, which would would try to wipe your rear after using the restroom if it had the capability.
Side note: Chrome was great, until they started locking it down from modifiication – which is sad; but easily explained by changes in the company after they got rid of “Google Labs”, which produced all the most useful tools. But Google, aka Alphabet (gag me), is no longer about INNOVATION but instead are entirely about MONETIZATION.
Anyways I digress. See my other post once its approved for step by step adding the bookmark.
@SANDER You are over complicating the issue. ALL i had to do was paste the same script into a new bookmark’s URL field, and it worked perfectly. (Right-click bookmark bar -> “Add Bookmar” -> Name it whatever -> Paste the script into the URL field).
I use Firefox ESR, as I recommend every do, especially if you work in a company as their System Administrator. But it also superior on home-PC’s if you are a power, and don’t like things like Mac computers, which would would try to wipe your rear after using the restroom if it had the capability.
Side note: Chrome was great, until they started locking it down from modifiication – which is sad; but easily explained by changes in the company after they got rid of “Google Labs”, which produced all the most useful tools. But Google, aka Alphabet (gag me), is no longer about INNOVATION but instead are entirely about MONETIZATION.
Anyways I digress. See my other post once its approved for step by step adding the bookmark.
Amazing! Thanks 🙂
This is a great tip! I’ve been trying to figure out a way to do this for a while.