How do I move the videojs control bar out of the video area or duplicate a videojs control bar?

I used a canvas element to pixelate a video by covering it on the video. But the canvas element will cover the control bar. So is there a way to move the control bar out of the video area or hide the original one and duplicate a new videojs control bar?

control bar in the video area](https://i.stack.imgur.com/ZykMJ.png)

By the way, is this the best practice to pixelate a video in front end?

I would assign the property pointer-events: none to the canvas so the merge will be seamless.

<canvas style="pointer-events:none">...

This way, your canvas will be just a filter, with no way of intercepting a click or anything else.

For the other question. No forcibly best practice as it's a bit subjective, however, for more complex effects, it is a used technic.

EDIT: There's an example here to move a custom control bar.
https://github.com/videojs/video.js/issues/2857

I did some quick tests. You can move the control bar with CSS

.vjs-control-bar
{
  position: relative;
  top: 300px;
}