✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

Fullscreen Background Video Using HTML5 And CSS

Last Updated : Jul 1, 2023

IN - HTML5 CSS | Written & Updated By - Riya

In this tutorial we will show you how to add fullscreen background video using HTML5 and CSS, Fullscreen Background Video is a modern way to present your website in front of your user.

When user view your website a video is playing in the background of your website without disturbing its content and that makes your website very modern and different.

You may also like custom video player using HTML5.

Fullscreen Background Video Using HTML5 And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Add Fullscreen Background Video It Takes Only Two Steps:-

  1. Make a HTML file and define markup
  2. Make a CSS file and define styling

Step 1. Make a HTML file and define markup

We make a HTML file and save it with a name video.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="video_style.css">
</head>
<body>
<div id="video_wrapper">

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

<div id="wrapper">
<h1>FullScreen Background Video Using jQuery And CSS</h1>
</div>

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

In this step we create video element and insert our background video and we also add some attributes required for the working of background video.

'autoplay' is used to autoplay the video on page load, muted is used to mute the video sound and loop is used to replay the video after the completion.You may also like animated background using CSS3.

Step 2. Make a CSS file and define styling

We make a CSS file and save it with a name video_style.css 

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

Thats all, this is how to add fullscreen background video using HTML5 and CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on fullscreen background video helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪