How to make this type of landing page??

https://thedrawingroomcreative.com/
this is the website !! please if anyone can help me making this type of landing page

Comments

[Robin Kretzschmar]

Simple, this is just a video!

Press F12 in your Browser to open the developer tools.
Then check the source of the website.

Open the Video URL in a new tab and you can see, that there is no magic overlay or something, the video is just presented as is.

<video width="100%" height="100%" muted="" autoplay="" webkit-playsinline="" playsinline="" loop="" class="video-fullscreen" id="home-video" poster="https://s3-eu-west-1.amazonaws.com/thedrawingroom/tdr_content/uploads/2016/12/08153711/tdr_video_screen_new-1071x600.jpg">
        <source src="https://s3-eu-west-1.amazonaws.com/thedrawingroom/tdr_content/uploads/2016/12/08153532/tdr_desktop_new.mp4" type="video/mp4">
    </video>

[Vatsal]

Thanks a lot, bro, its just a video!! i thought it is wrapped or overlayed!!

[Weston Wedding]

As someone already explained, it's all just being done in a video.

However, if you really wanted to do it without just baking it into a video, there ARE ways to do it by using SVGs! The caveat being that SVG support only recently really started happening across all browsers in the past couple years.

If you use the <mask> approach, you can play a video behind a SVG and knock out parts to let the video come through. Here's an example of SVG Text Mask w/ Fill on Codepen. The downside of this is that you have an SVG in front of a video, so it has to be big enough to obscure the whole video element.

You can also use a SVG clip path to clip out the parts of the video element you don't want to be visible. This method allows the animated text to just float there with any arbitrary background elements showing behind it. For example, check out SVG Clip Path Video on Codepen.

Each option has to take into account what kind of web browser support your project requires.

Sara Soueidan has excellent pages on the subject of SVG clipping, by the way. I'd recommend checking her out!
CSS SVG Clipping

[St3l]

Hello Vatsal, for what exactly do you need help to do this kind of page ?

[Vatsal]

I want to make that fonts and video in background !! Can you please check that link i have posted here!!