将音量面板向右对齐

Question

I need to align volumePanel to the right corner. It seems API hasn't this functionality, so, I've done a lot of attempts on CSS, but it doesn't want to move :( I've built a ready-to-work template at codesandbox. Help me, please.

Answer 1

Add this CSS rule to set the volumePanel to the right. As this is a component, make sure you don't use a scoped style tag but a regular style tag

<style>
  .vjs-control-bar {
     display: flex;
     justify-content: end;
}
</style>

You should get this result

Answer 2

You must create your own custom skin to place elements as you wish and style them as you wish. VideoJS has a documentation for that and there are plenty of websites that let you customize a skin.

see this : https://www.scriptsmashup.com/Video_Skin_Generator/Videojs/videojs-skin-generator.html