Vertical volume bar.

[libid0nes]

You have a great player, but the lack of a vertical volume bar is a shame.

Because the horizontal one eats up a lot of space. Especially on mobile devices, look, isn't it funny?

The sound eats away all the space, and the user can't even completely turn off the sound just by pressing a key.

[Abdulrahmanh995]

I figured out to do it this way using SCSS:

 plyr__volume {
      max-width: initial;
      min-width: initial;
      width: auto;
      position: relative;

      input[data-plyr="volume"] {
        width: 7rem;
        margin: 0;
        position: absolute;
        left: 50%;
        top: -1rem;
        transform-origin: left;
        transform: rotate(-90deg);
        opacity: 0;
        z-index: -1;
        transition: all .2s;
      }
    }

Taking into account that my root font-size is 10px.

[hrishikesh-k]

Thank you @Abdulrahmanh95 for the clever CSS trick.

Sadly, it's not as easy (for me) to dismiss the volume bar once it's shown. After using the CSS mentioned above, I used JavaScript to show the volume bar like this:

document.body.querySelector('.plyr__volume').addEventListener('mouseover', function()
    {
        document.querySelector('.plyr__volume input[data-plyr="volume"]').style.opacity = 1;
    }

But then, I'm not sure how to hide it once it's used.

[lafraia]

This would be an awesome feature for vertical videos. Related to #1958 and #1544.

[nordiws]

plyr__volume { max-width: initial; min-width: initial; width: auto; position: relative;

  input[data-plyr="volume"] {
    width: 7rem;
    margin: 0;
    position: absolute;
    left: 50%;
    top: -1rem;
    transform-origin: left;
    transform: rotate(-90deg);
    opacity: 0;
    z-index: -1;
    transition: all .2s;
  }
}

I tried this fix, the input shows vertical, but the slide action it's still happening horizontally.

[ixover]

i fixed it using css

.plyr__volume{
    max-width: 33px;
    min-width: 0;
}
.plyr__volume input[data-plyr="volume"]{
   display: none;
   width: 87px;
   position: absolute;
   transform: rotate(270deg);
   top: -42px;
   left: -33px;
   height: 25px;
   padding-left: 18px;
}
.plyr__volume:hover input[data-plyr="volume"],.plyr__volume input[data-plyr="volume"]:hover{
    display:block !important;
}`