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>
Advertisement
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; }