How to Add Image Mask Over Background Video

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!

Hi SquareSpace Forum,

I figured out a solution that I think will work. I'm still working through it but will share it here when I have it further developed.

Thanks!

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!