DEV Community

Vatsal
Vatsal

Posted on

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

Top comments (5)

Collapse
 
darksmile92 profile image
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>
Collapse
 
vatsal profile image
Vatsal

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

Collapse
 
weswedding profile image
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

Collapse
 
stel profile image
St3l

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

Collapse
 
vatsal profile image
Vatsal

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