X
Tap here to go to the mobile version of the site.

ஆதரவு மன்றம்

Autohide the HTML5 player controls when video is paused as well.

  • 4 replies
  • 2 இந்த பிரச்னைகள் உள்ளது
  • Last reply by frfxuser
பதிவிடப்பட்டது

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?

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?

frfxuser மூலமாக திருத்தப்பட்டது

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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 2

Additional System Details

நிறுவப்பட்ட நிரல்கள்

  • Foxit Reader Plug-In For Firefox and Netscape
  • Intel web components updater - Installs and updates the Intel web components
  • Intel web components for Intel® Identity Protection Technology
  • Next Generation Java Plug-in 11.111.2 for Mozilla browsers
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers
  • OGPlanet Game Plugin
  • Shockwave Flash 23.0 r0

பயன்பாடு

  • User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0

கூடுதல் தகவல்

jscher2000
  • Top 10 Contributor
8794 தீர்வுகள் 71943 பதில்கள்
பதிவிடப்பட்டது

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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.

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: <code>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;</code> (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?

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?

frfxuser மூலமாக திருத்தப்பட்டது

jscher2000
  • Top 10 Contributor
8794 தீர்வுகள் 71943 பதில்கள்
பதிவிடப்பட்டது

உதவிகரமான பதில்

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

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.

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.