Greasy Fork

Request Script Make Youtube Sound Slider Always Show

Please Create script make youtube sound slider always show
For example like this image down

Create a new style in stylish, and add this:

.ytp-volume-panel {
  width: 52px;
  margin-right: 3px;
}
.ytp-big-mode .ytp-volume-panel {
  width: 78px;
  margin-right: 5px;
}

Thank you for reply, It was very helpful.

This is the full script if any on need it.

var css_1 = document.querySelector(".ytp-volume-panel");
css_1.style.width = "52px";
css_1.style.marginRight = "3px";

var ccs_2 = document.querySelector(".ytp-big-mode .ytp-volume-panel");
ccs_2.style.width = "78px";
ccs_2.style.marginRight = "5px";

@Another Dimension:

The answer of q1k is a CSS code to use with Stylish. You can add directly the CSS code to your userscript with the function GM_addStyle(css), including // @grant GM_addStyle in the header. Or you can build your own function to add a html style block. Like this:

 function _addStyle(css)
 {
  var dad, obj;
  obj = document.createElement('style');
  obj.setAttribute('type', 'text/css');
  obj.innerHTML = css;
  dad = document.getElementsByTagName('head');
  (dad && dad.length ? dad[0] : document).appendChild(obj);
 }

@leoncastro

I want say thank you for your reply.

This is the best way to use Stylish, it's really very helpful.

// @grant  GM_addStyle

GM_addStyle('* .ytp-big-mode .ytp-volume-panel { width: 78px; margin-right: 5px; }');
GM_addStyle('* .ytp-volume-panel { width: 52px; margin-right: 3px; }');

This is a CSS style with 2 rules and 8 lines (formated). You converted this into 2 separated lines of code. But you dont need to do it. Imagine a css with thousand of lines! View this trick using template strings, that were enclosed by the grave accent (`) :

// ==UserScript==
// @grant        GM_addStyle
// ... do not forget the other parameters @name, @namespace, @version, @include, etc.
// ==/UserScript==

GM_addStyle(`

.ytp-volume-panel {
  width: 52px;
  margin-right: 3px;
}
.ytp-big-mode .ytp-volume-panel {
  width: 78px;
  margin-right: 5px;
}

`);