Using Squarespace SVG shapes on video embeds. Arched video embed.

Site URL: https://ellxs.art/home-copy3

Hello! In the site URL I posted I am trying to use the native SVGs that Squarespace uses to shape images and gifs.

https://ellxs.art/home-copy3

It's the main video on the right side of the page. But I am trying to use the SVG overlay on a vimeo embed. I can get the SVG to show up on some screen sizes with the code below but it disappears frequently. I am just using the embed block with the below code in it.

You can see exactly what I am trying to accomplish with the gif on the right of the homepage https://ellxs.art. But that is a GIF and it's too large for speedy loading so I am moving to a vimeo embed that autoplays.

Any advice would be much appreciated I feel like I am so close! Probably a simple CSS class missing.

<div style="clip-path: url(#svgPathNewarched-window);-webkit-clip-path: url(#svgPathNewarched-window);position: relative;
"><div class="sqs-image-content" style="padding-bottom: 140%;">
<iframe src="https://player.vimeo.com/video/701477595?h=8004c2c071&amp;badge=0&amp;background=1&amp;autoplay=1&loop=1&autopause=0&background=1autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>

Also I used border radius CSS hacks and it just doesn't look as good as the SVG that squarespace already has in their style sheets. I think I've made a responsive design error by trying to use something that Squarespace designed for images/gifs on a video embed.