javascript - How can I draw a letter shape with a video as a background on my website?

Question

I am trying to figure out how this website is made but I just cannot figure out how they've done this.

They are using a gif on their homepage. But, if you hover over one of the sections, "Production/ Creative", etc., it becomes clearer. How is this made? By Javascript?

They are using arrows as a slider. How is this made?

Last but not least - If you click on the arrows, you see that a shape is shown with a video in the background being played. I have been searching for hours but just cannot figure out how to draw that line.

Answer 1

You can easily use a mask with a letter as a shape, to do this you can consider an SVG mask.

Here is a basic example. As you will see, the SVG is a basic text element. Simply adjust the font and the letter to what you want:

video {
    height:300px;
    width:100%;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') center/contain no-repeat;
}

<video src="https://node-images-test.s3.eu-west-2.amazonaws.com/Pexels+Videos+2292093.mp4" autoplay muted></video>