Jump to content

How to Add Image Mask Over Background Video

Recommended Posts

Hello SquareSpace Forum,

I'm trying to create a homepage banner that is a looping background video which is masked out by the company logo. The look I'm trying to achieve is showcased here on this site in their main banner. It looks as if this site was created in WordPress. Is it possible to achieve this effect in SquareSpace? Does this effect require a plugin?

Here is the current site I'm redesigning and want to apply the effect to. I have the new homepage designed but not enabled.

Please see the attached screenshot for the banner design I'm trying to create. I'm under a bit of a deadline to figure this out so any help would be greatly appreciated.

Thank you!

MethodAI_SiteDesign_021424_Page_1.jpg

Link to comment
  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 1 month later...

Hello SquareSpace Forum, 

I was able to find a solution to this video mask banner element but it does not work on Safari. Does anyone know how I can fix this issue? It seems like Safari ignores the -webkit-clipmask attribute so I'm wondering if I need to do a mask-image within an iframe. 

If anyone can help that would be wonderful. Thanks!

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.