DEV Community

Cover image for Add a video background to your landing page to make it more gorgeous
Anjan Shomooder
Anjan Shomooder

Posted on

Add a video background to your landing page to make it more gorgeous

In this blog you will learn how to add a video background to your landing page to make it more gorgeous.

Preview:

Requirements:

  • Basic HTML & CSS knowledge
  • Basic Javascript(Optional. only required for the navigation toggle effect)

I have already created a video about it on my youtube channel. Check that out for more details.

If you like this video, please like share, and Subscribe to my channel.

source code: https://github.com/thatanjan/video-background-landing-page-yt

Starter code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Taylor Swift</title>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="nav.css" />
        <link rel="stylesheet" href="content.css" />
        <link rel="stylesheet" href="responsive.css" />
    </head>
    <body>
        This is body

        <script src="index.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Let's add the video and overlay to html.

<section class="video_container">
    <video src="./media/background.mp4" autoplay loop muted></video>
    <div class="overlay"></div>
</section>
Enter fullscreen mode Exit fullscreen mode

Result:
video with no style - Add video background to your landing page to make it more gorgeous by cules coding

Explanation:

  • A video container to contain the video and overlay.
  • Video will be started automatically with a loop. It will also be muted.

Css reset

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • The entire webpage should not be bigger than the screen width.
  • Webpage will not have any horizontal scrolling.

Let's style the video:

.video_container {
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}

.video_container video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
Enter fullscreen mode Exit fullscreen mode

Result:
video styled but no overlay - Add video background to your landing page to make it more gorgeous by Cules Coding

Explanation:

  • The video container is taking the full width of the screen without any overflow. It is also positioned as relative.
  • Actual video is positioned absolute and aligned with the container. It is also taking the full height and width.

If you have confusion with Css position then you can watch this video.

  • To make the video fit, we need to use object-fit to cover.
  • If the user adjusts screen width, the user will always see the center of the video because of object-position: center;.

Let's style the overlay.

:root {
    --primary-red: #70000e;
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-red);
    mix-blend-mode: soft-light;
}
Enter fullscreen mode Exit fullscreen mode

Result:
with overlay

Explanation:

  • Overlay element is aligned with the container using position absolute.
  • The background color is stored inside a variable. If you don't know about css variable, then you can check out this blog
  • Overlay has been blended with the background using a blend mode. We need to use mix-blend-mode property to do so. I will use soft-light as value. You can learn about mix-blend-mode from here

And that's how you add a video background to a landing page to make it more gorgeous. If you want to learn how the rest of the project was made please watch the video.

source code: https://github.com/thatanjan/video-background-landing-page-yt

Final result:

Shameless Plug

I have made a video about how to build a carousel postcard with React, Material-UI, and Swiper.js.
If you are interested you can check the video.

You can also demo the application form here

Screenshot of Insta Carousel

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

If you have any questions, please comment down below.
You can reach out to me on social media as @thatanjan.
Stay safe. Goodbye.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites.

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories.
Alt Text

I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them.
Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.

Contacts

Blogs you might want to read:

Videos might you might want to watch:




Discussion (14)

Collapse
jonrandy profile image
Jon Randy

Ugh. Autoplayng video on pages is a big 'no' from me. Will also annoy the crap out of people with expensive data plans. At least you muted it I guess

Collapse
ikacodes profile image
Weronika Skaczkowska

Oh, neat, great timing for this article! I am going to work on a website with a video header soon, so this will be very useful.
Do you also have some tips on the good practices concerning the length, resolution and maximum file size of such a video? What is a good rule of thumb for that?

Collapse
thatanjan profile image
Anjan Shomooder Author

Well I have also tried something like this first time.
For tips, I would say:

  1. keep the duration short like 10-20 seconds.
  2. Optimize your video to shrink the size.
  3. Try to use 16:9 aspect ratio with lower resolution like 720p.
Collapse
ansub profile image
Ansub Khan

This is Neat! really liked this a lot. i will try to make something like this!

Collapse
thatanjan profile image
Anjan Shomooder Author

Thanks.

Collapse
crtl profile image
crtl • Edited on

You are missing playsinline so the video wont play on safari.

Collapse
ptejada profile image
Pablo Tejada

Are you a Taylor Swift fan?

Collapse
thatanjan profile image
Anjan Shomooder Author

Yeah

Collapse
imiahazel profile image
Imia Hazel

Thanks for the useful tips.

Collapse
thatanjan profile image
Anjan Shomooder Author

My pleasure.

Collapse
vinzvinci profile image
Vincent Villafuerte

It's great when creating movie production like Netflix.

Collapse
spock123 profile image
Lars Rye Jeppesen

Video backgrounds just scream NOOB. It's horrible, sorry

Collapse
jeremyfarrance profile image
Jeremy Farrance

Yes, but there are situations and clients where it is needed and a) learning how to do it and b) doing it well, are part of being a good front-end developer. Telling your client "no" because you don't like it or because UX/UI best practices declare it a poor choice IS EXACTLY a poor choice. And dropping immature opinionated negativity on someone's efforts to share and teach others? Also a poor choice.

Collapse
ricobrase profile image
Rico Brase

Telling your client "no" because [...] UX/UI best practices declare it a poor choice IS EXACTLY a poor choice.

Well, but you should at least inform your client, that it is bad UX/UI and explain to them WHY it is that way and what the possible consequences could be, if they stick to their decision.