Tuesday, May 12, 2015

How to set up video in background using css

Introduction: In this article today I am going to explain how to set up or play video in background using css

Description:
You have seen video being used as a background. We can set up the video in background in few steps.
Add the below given style to html page:

<style>
body{ margin:0px;);}
video#bg {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#bg_container{ height:500px; overflow:hidden; }
#content{ position:absolute; top:0px; padding:30px; color:#000;}
</style>

After that write the below given code and give the path of video that you want to play in background.

<div id="bg_container">
  <video id="bg" src="cloud.mp4" autoplay loop muted="true"></video> 
</div>
<div id="content">
<h2>Play video in Background</h2>
<h1>Visit <a href="http://www.articlemirror.in/">Articlemirror</a> for more tutorials</h1>
</div>

Complete code of HTML page:
<html>
<head>
<style>
body{ margin:0px;);}
video#bg {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#bg_container{ height:500px; overflow:hidden; }
#content{ position:absolute; top:0px; padding:30px; color:#000;}
</style>
</head>
<body>
<div id="bg_container">
  <video id="bg" src="cloud.mp4" autoplay loop muted="true"></video> 
</div>
<div id="content">
<h2>Play video in Background</h2>
<h1>Visit <a href="http://www.articlemirror.in/">Articlemirror</a> for more tutorials</h1>
</div>
</body>
</html> 
download


No comments:

Post a Comment