Adding a video as a background in html/css

[Edrol97]

I want to add a video as a specific page background in html/css. How would I do it so the video loops ad infintum?

Thanks,

Eliot

 

[simong1993]

Hey Eliot,

Yeah, you can do that easy enough — just use the <video> tag in HTML, chuck in your autoplay, muted, and loop attributes, and you’re good to go. That’ll make it play automatically and loop forever without sound.

Just make sure the video’s either covering the whole page via CSS or inside a div set to position: absolute or fixed, depending on how you want it layered. Also, don’t forget playsinline for mobile if you want it to behave.

If you need it to sit behind content, you’ll just set the z-index stuff right and maybe throw object-fit: cover on it so it doesn’t go all weird with scaling.


Let me know if you want a snippet

 

[Edrol97]

Hey Eliot,

Yeah, you can do that easy enough — just use the <video> tag in HTML, chuck in your autoplay, muted, and loop attributes, and you’re good to go. That’ll make it play automatically and loop forever without sound.

Just make sure the video’s either covering the whole page via CSS or inside a div set to position: absolute or fixed, depending on how you want it layered. Also, don’t forget playsinline for mobile if you want it to behave.

If you need it to sit behind content, you’ll just set the z-index stuff right and maybe throw object-fit: cover on it so it doesn’t go all weird with scaling.


Let me know if you want a snippet

A snippet would be helpful. is &lt;video&gt; the same as <video> as a tag?

Thanks,

Eliot

 

[JimmysNetwork]

A snippet would be helpful. is &lt;video&gt; the same as <video> as a tag?

Thanks,

Eliot

If you use <video> it would display it as text whereas <video> would actually load the video. You would only use the first one during like a tutorial or something.

Something like this should work for example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Code</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="video-background">
    <video autoplay muted loop playsinline>
      <source src="background.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>

  <div class="content">
    <h1>Welcome to My Website</h1>
    <p>This content appears over the video background.</p>
  </div>
</body>
</html>

body, html {
 code here
}

.video-background {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  overflow: hidden;
}

.video-background video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.content {
  code here
}