Modify CSS for Volume and Control Icons Positioning

[Victor_root 1]

Hello,

I need assistance with modifying the CSS for my Emby Server. Based on the attached screenshot, I would like to make the following changes:

• Move the volume bar (currently at the top right, circled in green) to the bottom, near the area circled in green.
• Move the control icons (currently at the bottom right, circled in red) to the bottom center, in the area circled in red.

Could someone provide guidance or the necessary CSS code to achieve these modifications?

Here is the screenshot for reference:

 

Thank you in advance for your help!

Best regards.

 

[Happy2Play 8685]

Don't believe volume can be moved out of headerright as it is already not part of the page.

But since there are hidden controls already in for mobile portrait mode.

Maybe something like this.

div.videoOsdBottom-buttons-topright {
    position: absolute;
    left: 80%;
    bottom: 5%;
}


div.videoOsdVolumeControls-top {display: none;}

div.videoOsdVolumeSliderWrapper-bottom {
    max-width: 20em;
}

div.videoOsdVolumeControls-bottom {
display: inline-flex !important;
    left: 10%;
    top: 50%;
}