Autohide the HTML5 player controls when video is paused as well.
The HTML5 player controls will hide itself after a few seconds when a video starts to play either from clicking a YouTube video link or when the video is resumed from pause. However, the controls will remain visible as long as the video is paused. The controls are quite obstructive due to certain moments when I need to pause to see a certain thing in the video in a very short time-frame but got covered by the player controls and disappears when resume playback. So, how do I make the HTML5 player controls to also auto-hide a few seconds after the video is paused or instantly hides when the mouse is outside the player area?
Modified by steve j
Chosen solution
Hi frfxuser, the built-in player works the way you describe, but YouTube uses scripts to customize the player controls, so you would need a YouTube-specific "hack" to hide them on demand.
One possible approach would be to use a Bookmarklet, which is a snippet of JavaScript that you save on your Bookmarks Toolbar or Bookmarks Menu for quick access. The script could set the various controls to "display:none" and then when you click the button again, remove that rule so they show again and you can resume normally.
If you want to try that:
One-time Setup:
(A) Select and copy the following script:
javascript:var s=document.getElementById('stylehidecontrols'); if(s){s.remove();} else{s=document.createElement('style'); s.id='stylehidecontrols'; var r='#movie_player .ytp-gradient-top, #movie_player .ytp-chrome-top, #movie_player .ytp-progress-bar-container, #movie_player .ytp-chrome-controls{display:none !important}'; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);} void 0;
(B) Right-click a spot on the Bookmarks Menu or Bookmarks Toolbar where you would like to save the script and choose New Bookmark
(C) In the Location box, paste the script, then in the Name box, enter something you'll remember like YT Hide and click the Add button
To use the bookmarklet:
After clicking pause, click the bookmarklet button to execute the script against the page and hide the controls.
You can resume the player by clicking it but if you want the full controls back, click the bookmarklet button again to remove the style hack from the page.
Read this answer in context 👍 2All Replies (4)
Chosen Solution
Hi frfxuser, the built-in player works the way you describe, but YouTube uses scripts to customize the player controls, so you would need a YouTube-specific "hack" to hide them on demand.
One possible approach would be to use a Bookmarklet, which is a snippet of JavaScript that you save on your Bookmarks Toolbar or Bookmarks Menu for quick access. The script could set the various controls to "display:none" and then when you click the button again, remove that rule so they show again and you can resume normally.
If you want to try that:
One-time Setup:
(A) Select and copy the following script:
javascript:var s=document.getElementById('stylehidecontrols'); if(s){s.remove();} else{s=document.createElement('style'); s.id='stylehidecontrols'; var r='#movie_player .ytp-gradient-top, #movie_player .ytp-chrome-top, #movie_player .ytp-progress-bar-container, #movie_player .ytp-chrome-controls{display:none !important}'; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);} void 0;
(B) Right-click a spot on the Bookmarks Menu or Bookmarks Toolbar where you would like to save the script and choose New Bookmark
(C) In the Location box, paste the script, then in the Name box, enter something you'll remember like YT Hide and click the Add button
To use the bookmarklet:
After clicking pause, click the bookmarklet button to execute the script against the page and hide the controls.
You can resume the player by clicking it but if you want the full controls back, click the bookmarklet button again to remove the style hack from the page.
Thanks, that's a neat method. However, it seems to only work on videos directly on Youtube website, but not on other sites linking to Youtube (i.e. embedded videos, is what you call it right? please correct me if I'm wrong). So, how to make it work on other sites?
Is there another way to do this besides the Bookmarklet method without having to toggle a button everytime I want to hide the controls? such as configuring the about:config menu or maybe installing a certain add-on that could help solve this issue?
Modified by steve j
Right, embedded videos are in a frame and the bookmarklet doesn't see them as part of the same page.
There might be an add-on you could use -- there are many YouTube-related add-ons -- but I haven't researched whether they have any feature like that.
It might be possible to create a custom style rule that shows the controls when you hover and hides them when you move the mouse away. I couldn't figure out how to do that. One site where users help other users with custom style rules is:
I see. Didn't know embedded video is more sophisticated. I tried looking for those add-ons but still to no avail. Guess I'll try asking help from that site you mentioned for a custom style rule. Thanks.