Jump to content

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

Recommended Posts

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>

Link to comment
  • Replies 1
  • Views 316
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.