Interacting with underlying element in HTML

I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.

<div class="row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900">
    <div class="content flex flex-wrap content-center justify-center">
        <img src="iphone-12-white.png" class="h-[60vh] z-10 absolute">
        <!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">-->
        <video src="screenrec.mp4" class="h-[57vh] mt-4 mr-1 rounded-[2rem]" controls muted autoplay></video>
    </div>
</div>

Video Under a Transparent Image

Turns out, you can disable pointer events!

In Tailwind, it is as simple as adding pointer-events-none to the bezel screen.

In CSS, this can be done by:

.className {
    pointer-events: none
}

Let us try this in a simple example.

Example

Here, we create a button and overlay a transparent box

<div style="height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;">
A box with 200px height and 200px width
</div>
<button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>

A box with 200px height and 300px width

As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding pointer-events: none to the box.

<div style="height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;">
A box with 200px height and 300px width
</div>
<button style="z-index: 1; margin-top: 20px; margin-bottom: 200px" onclick="alert('You were able to click this button')">Try clicking me</button>
</div>

A box with 200px height and 300px width

If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.