Positioning clipping paths to div corners

I am trying to create the following layout in this image:

The layout consists of a navbar up-top, as well as video header that shows an image at first, but when clicked on plays a video. I am trying to create a camera view-finder effect with an overlay div containing smaller divs with clipping paths. All of these will disappear when the video plays.

I have so far managed to create the following:

The issue is that my positioning is not done very responsively and the clipping paths move around when the browser is resized.

Can anyone advise on a better way to position them responsively? Maybe flexbox or grid layouts? I'm not sure if those will work in the context of an overlay?

HTML Code:

<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 code:

    .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);
        }
    }
}

I haven't added yet the circle at the center as I want to get the brackets right first.

Please let me know if anything is unclear and I'll try to clarify.

Thank you in advance.