When we use HTML5 video elements to build an application with Kurento, OpenVidu, Jitsi or any other RTC libraries, we want to completely hide the video controls.

We can hide the controls by not adding the controls attribute to the video element.

<video autoplay playsinline></video>

Even without controls attribute on the elements the user can view the controls section by right-clicking on the video and enabling the show controls.

Enabling Controls
User can enable the controls

To avoid this scenario, we can apply a single CSS attribute to make the video element never the target of pointer events.

<video autoplay playsinline style="pointer-events: none;"></video>

The above CSS attribute makes the video element not listen to pointer events. Therefore the user cant enables the controls by right-click menu.

Updated:

Leave a Comment