CSS 网格使 iframe 无响应

Question

我正在尝试使用 CSS 网格线在我的 HTML 页面（Chrome 浏览器）上组织一个嵌入式 iframe 视频。但是，网格区域似乎“覆盖”了 iframe，因此我无法点击 iframe 中的任何内容。如果我将 iframe 移出网格线区域，它就会再次响应。

经过大量搜索，我仍然找不到这个问题的解决方案，所以在这里发布一个。我怎样才能使我的 iframe 视频响应，同时仍然保持我的内容井井有条？

HTML

<!--Gridline wrapper/ container-->
<section class="wrapper">  
  <div class="text header">Some text</div>       
  <img class="pic" src="./image.png">
  <!--problematic iframe-->
  <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/LHgAz4CADmw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>

CSS

.wrapper {
    position:fixed;
    top:25%;
    left:25%;
    z-index: -1;
    margin-top: -5%;
    margin-left:-20%;

    /* Defines grid-template-columns and grid-template-areas values */
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 30% 40% 30%;
    grid-template-areas:
      'pic header header'
      'pic video video'
      '. video video';
  }

我已经尝试调整 z-index，希望将 iframe 向前移动会有所帮助，但无济于事。我还尝试过向包装器添加填充并使用 CSS 网格查询来调整布局。这些都不起作用。