CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml5-video
Zeusox
Zeusox

Reputation: 8448

HTML5 Video: How to Cover Controllers with a poster

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:

enter image description here

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

Upvotes: 0

Views: 1377

Answers (1)

Andy
Andy

Reputation: 633

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, e.g.

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

Upvotes: 1

Related Questions