How to set up video in background using css - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon