Skip to content

Instantly share code, notes, and snippets.

@brickbones
Last active December 2, 2023 01:18
Show Gist options
  • Save brickbones/16818b460aede0639e0120f6b013b69e to your computer and use it in GitHub Desktop.
Save brickbones/16818b460aede0639e0120f6b013b69e to your computer and use it in GitHub Desktop.
<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>
@MadhanDevlpr
Copy link

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

@HamidBenson
Copy link

thanks

@aviranjan07
Copy link

thank you

@chamlingkaman
Copy link

thank you

@lev1234567890
Copy link

thank you

@dreamboat6989
Copy link

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

@Bshata
Copy link

Bshata commented May 9, 2022

Thanks a lot man

@Bshata
Copy link

Bshata commented May 9, 2022

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

@Srivats728
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment