Jump to content

Modify CSS for Volume and Control Icons Positioning


Recommended Posts



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.



Link to comment
Share on other sites


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%;


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...