How to add a video as background of your website

77.7k How to Add Multiple Image to P

54.8k How to retain the selected val

48.5k How to Add and Remove items in

42.6k How to Detect if an app is ins

36.6k Showing a Popup Window Using M

33.6k List of Top 7 JavaScript Frame

prev 1 2 3 … 254 next

How to add a video as background of your website

@shristi.shandilya

Follow Recommendations Offline Message

over 8 years ago
- 0
- 1
  Positive Vote
- 0
  Negative Vote
- 0
  Save Favourite
- 0
- 0
- 1
- 1
- 668
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";
  }
})
```
Tags
HTML tags Javascript Blog
Comment on it