Cannot access iFrame as it has a transparent PNG on top of it

Have embedded a you tube iFrame in my webpage. To make it look more appealing I placed a a transparent png image (photoframe) on top of it.

Now I cannot click on the iFrame as it is overlay by another element.

How do I access the iFrame?

 <div class="Video_Block">
 <iframe width="948" height="632" src="https://www.youtube.com/embed/36UQCZEsY9g?autoplay=1&mute=1" title="Offical trailer of The Time Machine - A Rod Taylor Movie -1960" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 <img class="videoFrame" src="images/author/Video Frame.png" alt="Video Frame">
 <p class="Video_Title">The Time Machine</p>
 </div>

.Video_Block{
      /*border: 1px solid blue;*/
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
}

.Video_Block .videoFrame{
      position: absolute;
      width: 90%;
      height: 90%;
      left: 10px;
      top: 10px;
 }

 .Video_Block iframe {
      background-color: black;
      position: absolute;
      left: 35px;
      top: 40px;
      height: 175px;
      width: 195px;
      object-fit: contain;
      transition: border-radius 0.5s;
  [![Photo frame on top of the youtube-iFrame][1]][1]}

The best approach would be to surround the iframe in an element and style the container, if at all possible, like:

<div class="Video_Block">
  <div class="video-container">
    <iframe width="948" height="632" src="https://www.youtube.com/embed/36UQCZEsY9g?autoplay=1&mute=1" title="Offical trailer of The Time Machine - A Rod Taylor Movie -1960" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   <p class="Video_Title">The Time Machine</p>
</div>

Then apply CSS rules to video-container as desired (with a border or whatever else) - hard to say exactly without knowing what the Video Frame.png is).

If there's no way to replicate the effect you need in CSS alone, you can keep click events from registering on the image by giving pointer-events: none to the <img>.

.Video_Block .videoFrame {
  pointer-events: none;
  ...

This way, if the image is overlapping the iframe, clicks will bypass the image and go directly to the iframe.