Summer Training batches for B.Tech students are starting in may and june - Registration Open
Brand
(+91) - 78915-90002 - 97828-60519

Create Full Video Background With HTML5

Create Full Video Background With HTML5

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;}