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&badge=0&background=1&autoplay=1&loop=1&autopause=0&background=1autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>