DEV Community


Posted on


How to make this type of landing page??
this is the website !! please if anyone can help me making this type of landing page

Top comments (5)

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="">
        <source src="" type="video/mp4">
vatsal profile image

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

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

stel profile image

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

vatsal profile image

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

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.