Ggtcf

I have seen many horizontal volume sliders but I have not seen a proper way to make a vertical volume slider. I'm just curious. How I would go about making a vertical volume slider for my website? Something that would only appear when you hover over the volume button like on YouTube.

Here is a link to my website https://newcool.win/ (P.S f12, ctrl, etc. are disabled. So if you want to use the console you have to pull it up before it loads.) (P.P.S If the video doesn't load for you on start you will have to manually press the pause button. This is due to chrome's decision to block auto-play videos back in Chrome 66)

The .css for fas or fa-volume-up or fa-pause etc. is from https://fontawesome.com/ (if anyone is not familiar with it)

<div id="star" class="video mask overlay">
<i class="fas fa-volume-up volume-button "></i>
<i class="fas stop-button fa-pause"></i>
<div class="video-fallback"></div>
<video id="video" onloadstart="this.volume=0.2" loop="">
<source src="videos/SONG.MP4" type="video/mp4"></source>
</video>
<script>setTimeout(function()document.getElementById("video").play();, 3000);</script>

The css class for video mask overlay is just a dark overlay layer to stop the video from shining in your eyes.

 .volume-button
 font-size:18px;
 position:absolute;
 z-index:25;
 bottom:50px;
 left:20px;
 cursor:url(../images/cursor/red.cur),pointer;
 color:#fff;

 .stop-button
 font-size:18px;
 position:absolute;
 z-index:25;
 bottom:50px;
 left:50px;
 cursor:url(../images/cursor/red.cur),pointer;
 color:#fff;

.video-fallback
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:hidden;

 video
 position:fixed;
 top:50%;
 left:50%;
 min-width:100%;
 min-height:100%;
 width:auto;
 height:auto;
 z-index:-9999;
 transform:translateX(-50%) translateY(-50%);
 background-size:cover;
 transition:1s opacity;

$(".video").each(function() 
 $(".stop-button").click(function() 
 $(".stop-button").toggleClass('fa-play').toggleClass('fa-pause');
 var videoBG = document.getElementById("video");
 if (videoBG.paused)
 videoBG.play();
 else
 videoBG.pause();
 );
 $(".volume-button").click(function() 
 $(".volume-button").toggleClass('fa-volume-off').toggleClass('fa-volume-up');
 $("video").prop('muted', !$("video").prop('muted'));
 );
 );

If there is anything I missed or if you need more information please let me know and I will try to provide it. (Or you can look at my site)