Create Fullscreen Video Background with HTML and CSS

Last Updated : 25 Jul, 2024

This article will show you how to add Full-screen background video with the help of HTML and CSS. Creating a fullscreen video background with HTML and CSS can add a dynamic and engaging element to your web page. To add the background video, we use HTML video tag.

HTML video tag is used to add video, and CSS styles add its position and other styling elements.

Example 1: We will add a full-screen background video.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<title>
		How to Create Fullscreen Video 
		Background with HTML and CSS?
	</title>
	
	<style>
		.video-container {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			overflow: hidden;
		}

		video {
			position: absolute;
			z-index: 10;
			width: 100%;
			height: 100vh;
			max-width: none;
		}
	</style>
</head>

<body>
	<div class="video-container">
		<video src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4"
			autoplay loop muted>
		</video>
	</div>
</body>

</html>

Output:

Example 2: In this example, we will add full screen background video, and add some text and play/pause button over video.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>
		How to Create Fullscreen Video 
		Background with HTML and CSS?
	</title>
	
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		.video-container {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			overflow: hidden;
		}

		video {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100vh;
			max-width: none;
		}

		.overlay-content {
			background-color: rgb(40, 224, 40);
			opacity: 0.5;
			position: absolute;
			z-index: 2;
			bottom: 0;
			text-align: center;
			width: 100%;
			padding: 20px;
		}

		button {
			padding: 10px 20px;
			border-radius: 10px;
			background-color: rgb(7, 66, 7);
			border: none;
			font-size: 1.5rem;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div class="video-container">
		<video id="backgroundVideo"
			autoplay loop muted>
			<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221105184949/ezgif.com-gif-maker.mp4"
				type="video/mp4">
		</video>

		<div class="overlay-content">
			<h1>GeeksforGeeks</h1>
			<p>A computer science portal for geeks</p>
			<button id="toggleButton" onclick="toggleVideo()">
				Pause/Play
			</button>
		</div>
	</div>

	<script>
		let video = document.getElementById("backgroundVideo");

		function toggleVideo() {
			if (video.paused) {
				video.play();
			} else {
				video.pause();
			}
		}
	</script>
</body>

</html>

Output:

How to Add an Iframe Border using CSS ?

vkash8574

Improve

Article Tags :

Create Fullscreen Video Background with HTML and CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?