将剪切路径定位到div角

Question

我正在尝试在此图像中创建以下布局：

该布局包括一个navbar上端以及一个视频标头，该标头最初显示图像，但是单击该键可播放视频。我试图用覆盖物div创建一个相机取景器效果，其中包含具有剪切路径的较小div。视频播放时所有这些都将消失。

到目前为止，我设法创建了以下内容：

问题在于，调整浏览器大小时，我的定位无法快速响应，并且剪切路径会四处移动。

有人可以建议一种更好的方式来响应性地放置它们吗？也许是flexbox还是网格布局？我不确定它们是否可以在叠加层的背景下使用？

HTML代码：

<div class="homepage-content">
  <main>
    <section class="header-banner">

      <div class="container-flex">
        <div class="container overlay">
          <div class="bracket1"></div>
          <div class="bracket2"></div>
          <div class="bracket3"></div>
          <div class="bracket4"></div>
        </div>

        <video id="header-vid" poster="<?php echo get_template_directory_uri() . '/inc/img/screen.jpg'?>">
          <source src="<?php echo get_template_directory_uri() . '/inc/video/reel.mp4'?>" type="video/mp4" />
        </video>
      </div>
    </section>
  </main>
</div>

SCSS代码：

    .header-banner{

    video{
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .overlay{
        position: relative;

        div{
            background-color: rgba(255,255,255,.25);
            clip-path: polygon(100% 0, 100% 10%, 10% 10%, 10% 100%, 0 100%, 0 0);
            height: 5rem;
            width: 5rem;
            position: absolute;
        }

        .bracket1{
            left: 0;
            top: 8vh;
        }

        .bracket2{
            right: 0;
            top: 8vh;
            transform: rotate(90deg);
        }

        .bracket3{
            right: 0;
            top: 82vh;
            transform: rotate(180deg);
        }

        .bracket4{
            left: 0;
            top: 82vh;
            transform: rotate(270deg);
        }
    }
}

我还没有在中心添加圆圈，因为我想首先使括号正确。

请让我知道是否有任何不清楚的地方，我会尽力澄清。

谢谢。