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.
play-video-in-background
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.

 <video autoplay loop muted poster="poster.png" id="bg">
    <source src="vd.mp4" type="video/mp4">
</video>

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.

<div style="color:red"><b style="font-size:32px;">Rohit Kumar</b><br/>
             <b style="font-size:24px;">My Public Notebook <br/>
             <a href="http://www.iamrohit.in">www.iamrohit.in</a>
             </b>
        </div>




Final code for adding video in website background.

index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Play video in background</title>
<style>
#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;
}
 
</style>
    </head>
  <body>
    <video autoplay loop muted poster="poster.png" id="bg">
    <source src="vd.mp4" type="video/mp4">
</video>
  <div style="color:red"><b style="font-size:32px;">Rohit Kumar</b><br/>
             <b style="font-size:24px;">My Public Notebook <br/>
             <a href="http://www.iamrohit.in">www.iamrohit.in</a>
             </b>
        </div>
  </body>
</html>

DEMO

DOWNLOAD

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

2 Replies to “How to play full screen video in background using html5”

  1. I haven’t tried with youtube video, you need to see in youtube api for same, you can change youtube frame using youtube api but i am not sure to adding youtube video in background.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.