How to Create a Webpage With a Video As Background

August 20, 2014 by Web Programming

Just follow the below steps and you will get a beautiful webpage with video running as background:
Step 1: Open your Dreamwaver and then from menu select: File >> New >> General >> Basic Page >> HTML

Step 2: Then Before </head> tag copy and paste below code:

<style>

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto;
z-index: -100;
background: url(video.png) no-repeat;
background-size: cover;
}
video { display: block; }

.myButton{
background: url(button.png) no-repeat;
margin:0 auto;
width:300px;
height:300px;
}
.row{
background-color:#FFFFFF
height: 30px
width:auto
}
p{
text-align:center;
}
</style>
Step 3: Also put below code just after that (This is for IE):

<!–[if lt IE 9]>
<script>
document.createElement(‘video’);
</script>
<![endif]–>

 

Step 4: Inside ” <body> </body> ” tag copy and paste below codes:

<video autoplay loop poster=”video.jpg” id=”bgvid”>
<source src=”sample2.mp4″ type=”video/mp4″>
</video>

<div style=”background-color:#FFFFFF; height:80px; width:auto; margin-left:-10px; margin-right:-10px; margin-top:600px; padding-left:20px; margin-bottom:-30px;”>
This is menu area
</div>

Step 5: Change “sample2.mp4″ of <source src=”sample2.mp4″ type=”video/mp4”> with any MP4 Video you want to show.

Step 6: Save and exit and run in browser to see how you did 🙂 It worked fine for me.

 

Top