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 description

collections_bookmark Category :: Css
date_range Published :: 9 months ago At: 11:24 AM
person Writer :: Code

YOU MAY LIKE THESE POSTS