Player layout - Is it possible to add a component to the right of the player?

[nanandn]

Is it possible to change the layout of the player and the components in the player? By default the player and controls are laid out vertically, occupying 100% width. I want to add a component to the right of the player and have the player and other controls adjust the width accordingly? I want to add a sidebar.

Is this possible?

Thanks
Anand

[gkatsev]

Your best bet is likely to create a wrapper for the player, rather than trying to add something to the player div itself. You can then use flexbox or grid to have the player be on one side and your component be on the other side. Also, worth setting fill: true on the player so that it'll take up the entire area of its container.
However, if it must be within the player element, you definitely can still do this. You'll need to tweak the css to customize the width of various elements, particularly the .vjs-control-bar and .vjs-tech elements.

[nanandn]

@gkatsev Thank you for the quick response. Yes, I did manage to get what I wanted by wrapping the player and adding a side bar in that wrapper.

I do want make it part of the player, so it shows even in fullscreen mode. I don't mind the control bar on top of the sidebar, but I want the sidebar to the right of the player.

BTW: I am adding something like https://github.com/esonderegger/web-audio-peak-meter to the player view. Do you know of any videojs plugin/component that already does this?

Thanks
Anand

[gkatsev]

The alternative is to remove the default fullscreen button of the player and create a new one that takes your wrapper element fullscreen instead.
Anyway, to get the video to your element to be alongside each other, you'll probably want to do something like:

.vjs-tech,
.vjs-text-track-display {
  width: 70%;
}
.your-component {
  width: 30%
}

But there's likely other CSS tweaks you have to do as well.

I'm not aware of any plugins that bring a peak meter to video.js.

[nanandn]

Thanks @gkatsev