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?

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:

https://forum.userstyles.org/categories/style-requests

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.