Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

How to Fullscreen Background Video Using HTML And CSS

by
Category:php
php html css
How to Fullscreen Background Video Using HTML And CSS

Fullscreen background has become very popular in web design lately. Fullscreen images used as backgrounds have an amazing visual impact. So, in this tutorial we will show you how to add fullscreen background video using HTML5 and CSS.You may also like custom video player using HTML5. You may also like How to Get Thumbnail From Youtube Video Using PHP and How to Full Page Background Image Using HTML And CSS.

HTML and CSS Code

<html>
<head>
<link rel="stylesheet" type="text/css" href="video_style.css">
</head>
<style>
    body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
}
#video_wrapper
{
 margin:0px;
 padding:0px;
}
#video_wrapper video
{
 position: fixed;
 top: 50%; left: 50%;
 z-index: 1;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 transform: translate(-50%, -50%);
}
#wrapper
{
 position:relative;
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
 z-index:2;
}
h1 
{
 margin-top:250px;	
 color:white;
 font-size:45px;
 background-color: rgba(112, 112, 112, 0.74);
}
</style>
<body>
<div id="video_wrapper">

<video autoplay muted loop>
<source src="SampleVideo_1280x720_1mb.mp4" type="video/mp4">
</video>

<div id="wrapper">
<h1>FullScreen Background Video </h1>
</div>

</div>
</body>
</html>

0 Comments


Html code work in comment box


Related Post