How to play full screen video in background using html5

Hello Friends how are you, I hope you are doing good, Today i am going to share an useful and minimal code to play full screen video in background using html5, You must have seen most of the website playing video presentation in background, You can also create a video presentation of your business and add the same in your website background which makes your business more clear to visitor or new comers.



Here i am going to show you a simple line of code to display video in background, This code only work on html5 supported browser, Because i used HTML5 video tag to display video on page.

First add CSS to setting video in background.

#bg {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(poster.png) no-repeat;
    background-size: cover;
}

If video takes time to load on screen, poster.png image will be display in absence of video.

Now add video on page using HTML5 video tag.

Don’t forget to add bg id in video tag to apply css properties on video.

Then add some text over video as per your need.

Rohit Kumar

             My Public Notebook 

             www.iamrohit.in
             
        

Final code for adding video in website background.

index.html

  
    
    

    
  
    
  
Rohit Kumar

             My Public Notebook 

             www.iamrohit.in
             
        
  

If you like this post please don’t forget to subscribe my public notebook for more useful stuff