video-background.html

<div class="section">

        <h1>Welcome To Paradise</h1>

        <div class="video-container">
            <div class="color-overlay"></div>
            <video autoplay loop muted>
                <source src="video.mp4" type="video/mp4">
            </video>
        </div>

    </div>
    <div style="height:400px;width:100%">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quod soluta natus. Magni tempora animi illo ea accusamus ex deserunt odio facere deleniti molestiae qui eaque in illum praesentium sunt iste accusantium nobis repellat aspernatur alias, architecto consectetur voluptate dolore! Saepe, enim rem nam dolorem tempore blanditiis perspiciatis repellat architecto.</p>
    </div>
  
<style>
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section h1 {
  text-align: center;
  font-size: 6rem;
  font-family: "Cookie";
  padding: 20px;
  margin: 15px;
  z-index: 1;
  opacity: 0.7;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: lightblue;
  width: 100%;
  height: 100vh;
  opacity: 0.5;
}
</style>

thanks

thank you

thank you

thank you

My background will not play. I was trying to change the background to a different one but it is not displaying the video what am I doing wrong

Thanks a lot man

Try using a video with less size that well it will run perfectly on the background
and also try positioning the backgrounds

thanks a lot, i used it for my school project!