Create Full Video Background With HTML5 135
In this Tutorial you will learn how to make a full screen video background webpage with HTML5 video tag.
We can create this webpage with flash player but some disadvantages of it like:-plugin requirement, longer loading time and not mobile responsive so then we use HTML5 Video tag for creating full screen video background webpage because it have some advantages like:- not any plugin requirement, reducing loading time and also mobile responsive.[step:1] At beginning We will link CSS File In Head Section. Here “style.css” Is Our CSS File Name.
[step:2] Start header tag.Their in header tag we call an image with img src tag.
[step:3] After that create a div element
[step:4] Their in div element we use h1 heading tag for writing some text.
[step:5] Start form for a input type text and use button tag for searching.
[step:6] now we use video tag
[step:7] In video tag we use some properties like:- autoplay, loop and muted.
[step:8] then we use video_path name class in this video tag for giving some properties to video.
[step:9] then include video with its source and its type. then close video tag.
<html> <head> <title>Create Full Video Background Webpage With CSS3 and HTML5 by - Infonic Training </title> <link href="style.css" rel="stylesheet"> </head> <body> <header><img src="infonic-logo.jpg" alt="logo"></header> <div> <h1>Create Awesome Website With HTML5</h1> <form><input type="text" name="name"></form> <button><a href="#">Search Here</a></button> </div> <video autoplay loop muted class="video_path" > <source src="735343608.mp4" type="video/mp4"> </video> </body> </html>style.css file starting here
body
{ background-image:url(bg.PNG); background-size:cover;}
.video_path
{
position:fixed;
min-height:100%;
min-width:100%;
right:0px;
bottom:0px;
width:auto;
height:auto;
z-index:-1;}
div{ text-align:center; margin-top:200px;}
button{ background:transparent;}
button a{ text-decoration:none; color:#fff;}
