HTML5 Video: How to Cover Controllers with a poster

Question

I am using HTML5 to load a video from the backend. The UX requires a cover image that covers the whole HTML5 video player, including the controller. The issue is when I use the poster attribute to load a cover image, it does not cover the controller. Like their z-index is higher than the poster. Please see image below:

How can I have the poster image cover the controllers as well?

Answer 1

Here is one simple solution.

1) Remove controls attribute from video element

2) Show controls when video is clicked, like onclick="this.controls = true" or in event listener, eg

var video = document.getElementById('video');
video.addEventListener('click', function(){
    video.controls = true;
}, false);

3) If you don't want to show controls when video is not loaded yet, you can check its readyState https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState