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>
.png)
No comments:
Post a Comment