How to create a Fullscreen Background Video(Source Code)

Hey guys in this video i will show you how to create a full screen Background video with mix-blend-mode overlay text effect using html and css only.

watch the video

The background video i used for this tutorial is under the youtube license law called: : Creative Commons Attribution license (reuse allowed)

The HTML part is very easy to set up,watch the video above.Below is the folder structure of the simple project.

index.html
custom_style.css
nature.mp4(video)

css code - custom_style.css file

copy


           *{
               box-sizing: border-box;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
            }
            
            body{
              margin:0;
              padding: 0;
            }
            
            
            video{
              position: absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              object-fit:cover;
              object-position: center;
            }
            
            
            .message{
              height:100vh;
              display:flex;
              align-items:center;
              justify-content: center;
            }
            
            .message h1{
              font-size:7em;
              color:white;
              z-index:1;
              text-align:center;
              mix-blend-mode:overlay;
            }
            
            
            @media(max-width:700px){
              .message h1{
                font-size:3em;
                color:black;
              }
              
              video{
                display: none;
              }
            }

To Download the ready project:: click here