Please, can someone help us make a video the shape of an ‘M’? We have a video that goes on a loop. We would like it to autoplay. Please see the draft we have made in Wix (we want to recreate it on Webflow).
Many thanks in advance. We really appreciate any help
The easiest way to do it would be to stack a div on top of the video with the div having a transparent png in the shape of the “M” as it’s background image.
Hello @jhiggins, Thank you for answering our question. We have given your suggestion a try and cannot seem to make it work. We have found a few problems:
- The video is stretched across the whole page, however, we would prefer it to be fitted to the space of the ‘M’ if that makes sense. (please see the attached screenshot, the guitar is meant to be in the center of the ‘M’)
- The ‘M’ is now cut off within its own section (please see the attached screenshot; the white strip at the bottom is part of div block with the video/M)
Many thanks again
So I would put the “M” div and the video inside of a div and set the “M” size to either “cover” or contain" (which you do will depend on other factors). Does that make sense? If it’s still not working, just send a link.
I’d make a div that stretches across the screen with a black background.
Inside of this div add a new one with the background of a video and then add image of the “M” over that video and make sure it’s set to cover the div.
Float the video “M” div to the left.
Add some padding to the main black background container.
Here’s a quick illustration made in Paint.