How to overlay a regular table or make a grid of divs on the html5 player?

Question

css

There is a video element

<video autoplay loop class="bg-video">
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
</video>

I want to overlay a grid of, for example, 9 cells on it, and then make events under these cells, like buttons, but transparent, and when you hover over the video, this grid appears, how to do this? below I will draw approximately how I see it The

question is how to draw the grid itself over the video.

Answer 1

Place the video element in a wrapper (eg div) with css position : relative
Inside the wrapper after the video place an element with your grid with css position : absolute; top:0; left:0; width:100%; height:100% and set the z-index to provide a position above the video.