β–Ό
Streaming live at 10am (PST)

Video in shape of an 'M' - Need help to make

#1

Hello,
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 :slight_smile:

#2

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.

2 Likes
#3

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 :slight_smile:

#4

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.

#5

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.

#6

Hello @carlosdlt Thank you so much! We have been able to get it to work with your advice, very much appreciated :slight_smile:

2 Likes