Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to add a video as background of your website

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 1
    • 1
    • 634
    Comment on it

    Hii,

    While designing a web page our main motto is to design the web page beautiful and attractive with the help of CSS.
    Here is one more option i.e to add a video in the background of a webpage to make it more attractive and beautiful.
    Adding video in a background is an awesome way to enhance a website’s look, and this impact "satisfaction, enjoyment, and visual appeal" to our visitors.


    Before using video in background you must keep the following points in mind and apply them, here the list of points mentioned below:
    ---> Video which you are going to use in background must cover the browser window completely.
    ---> Video must be set to autoplay, and it should be muted by default i.r it should not include any kind of sound.This can be done by using an attribute of video tag  i.e autoplay.
    ---> We should include poster attribute of video tag by which a background image(poster image) will be displayed for browsers that do not support HTML5 and in mobile browsers

    ---> Poster image is visible only for few seconds or minutes till the video is downloading,once the video is downloaded this poster image will be replaced by the first frame of the video, so it is necessary to use poster image as first frame till the video is downloading.
    ---> Mobile browsers doesn't support autoplay HTML5 video as autoplaying video increases data charges, so don't worry if you notice your website's background video not getting autoplayed in mobile devices.
    ---> By using javascript you can play background video in mobile browsers.

    Given below is an example to understand how to add a video as background of your website.

    HTML:

    <body>
    <video autoplay  poster="home.png" id="video" loop>
        <source src="home.webm" type="video/webm">
        <source src="home.mp4" type="video/mp4">
    </video>
    <div id="BAckGround">
    <h1>Background Video</h1>
    <p>using HTML</p>
    <button>Pause</button>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    </body>

    Note:You must include the above mentioned link.

    CSS:

    body {margin: 0;background: #000; }
    video { 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-size: cover;-webkit-transition: 1s opacity;transition: 1s opacity;}
    .stopfade { opacity: .5;}
    #BAckGround {font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;font-weight:100; 
    background: rgba(0,0,0,0.3);color: white;padding:10px;width:100%;margin:2rem;font-size: 20px;margin:0 auto;
    text-align:center;}
    p{margin: 15px auto;}
    h1 {text-transform: uppercase;margin:0 auto;letter-spacing:5px;border-bottom:1px solid #fff;
      display:inline-block;}
    #BAckGround button { display: block;width:75px;padding:10px;border: none;margin:0 auto; font-size:15px;
    background: rgba(255,255,255,0.23);color: #fff;border-radius:5px;cursor:pointer;
    -webkit-transition: .3s background;transition: .3s background;}
    #BAckGround button:hover { background: rgba(0,0,0,0.5);}
    a {display: inline-block;color: #fff;text-decoration: none;background:rgba(0,0,0,0.5);padding:15px;
    -webkit-transition: .6s background;transition: .6s background; }
    a:hover{background:rgba(0,0,0,0.9);}

     

    Javascript:

    var vid = document.getElementById("video");
    var pauseButton = document.querySelector("#BAckGround button");
    
    function vidFade() {
      vid.classList.add("stopfade");
    }
    
    vid.addEventListener('ended', function()
    {
    vid.pause();
    vidFade();
    });
     
    pauseButton.addEventListener("click", function() {
      vid.classList.toggle("stopfade");
      if (vid.paused) {
        vid.play();
        pauseButton.innerHTML = "Pause";
      } else {
        vid.pause();
        pauseButton.innerHTML = "Paused";
      }
    })
    
    How to add a video as background of your website

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: