Align volume panel to right-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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