Create Full Video Background With HTML5 94

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;}
 
Job Oriented Diploma Programme for Graduate & Undergraduate Students

Join Job oriented computer Diploma programme and learn practical skills from industry experts. Join the best.. Be Ready for Industry..


Infonic Training & Development Center