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>

That was code was awesome

Thank you for that!

THANK YOU SO MUCH BRO

Hi, thanks so much this has saved me days of messing around, rookie questions what do i add to change the font colour and how can I bring the top of the video down say 100px to allow me to add a nav bar? (or float a nav bar over the top...
Thanks

You can just add your navbar above his HTML

Thank you so much

Can you please leave a link to download the video of the sea. I really loved

Thank you so much! Any advice dear magician to make it responsive?

thankyou very much

thanks you :3

Thank You

Hey where are the fonts????????????????????????????????????????????????

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!