Expand volume level by default

I would like the volume level element to be expanded from the beginning, without mouse cursor hovering. I am about this element that is hidden by default:

I didn’t find any built-in option for it (strange enough). I’ve been trying to solve it with CSS, but without success.

There is a demo of problem in action that I’ve created for the question. The code is shown below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Volume Volume Expanded</title>
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet" />
    <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
  </head>
  <body>
    <video
      id="my-player"
      class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered"
    >
      <source
        src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
        type="video/x-mpegURL"
      />
    </video>

    <script>
      videojs("my-player", {
        muted: true,
        autoplay: true,
        controls: true,
        controlBar: {
          children: {
            volumePanel: true
          }
        }
      });
    </script>
  </body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Volume Volume Expanded</title>
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet" />
    <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
  </head>
  <body>
    <video
      id="my-player"
      class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered"
    >
      <source
        src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
        type="video/x-mpegURL"
      />
    </video>
​
    <script>
      videojs("my-player", {
        muted: true,
        autoplay: true,
        controls: true,
        controlBar: {
          children: {
            volumePanel: true
          }
        }
      });
    </script>
  </body>
</html>
​

Answer

You could change the style of volume control
DEMO: https://codesandbox.io/s/videojs-volumelevel-show-forked-6bcc4l

 .video-js .vjs-volume-panel .vjs-volume-control {
        visibility: visible;
        opacity: 100;
        width: 5em;
        height: 1px;
        margin-left: -1px;
 }

JavaScript
 
 .video-js .vjs-volume-panel .vjs-volume-control {
        visibility: visible;
        opacity: 100;
        width: 5em;
        height: 1px;
        margin-left: -1px;
 }
​

Advertisement

Answer