It is possible to insert a video as the background to a webpage using CSS. This is probably a truly terrible idea for a number of reasons and I suggest you think very carefully before adding this kind of “bling” to a site.
Required knowledge:
See also:
Setup
You will need an HTML page and a video in the same folder. I created a quick video using the webcam on my laptop.
Code
The HTML required to insert the video in the page is covered in detail in the Add video in HML5 tutorial.
The CSS uses the <video> tag itself as the selector.
The element is positioned absolutely at the top left of the viewport. The element appears in this position regardless of the rest of the elements in the page.
The z-index attribute of -100 means that the video element will be well below/behind other elements on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: white;
}
video {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index:-100;
}
</style>
</head>
<body>
<section>
<h1>Here is a video of me acting the clown.</h1>
</section>
<video autoplay muted loop>
<source src="me.webm" type="video/webm">
</video>
</body>
</html>
References:
- SheCodes (no date) [HTML] – How to Add a Video as a Background in HTML and CSS. Available at: https://www.shecodes.io/athena/8475-how-to-add-a-video-as-a-background-in-html-and-css (Accessed: 26 July 2024).