Hey folks, In this article we’re going to set video background inside any HTML text.
This is very simple to do, but many beginner developers are very confused about doing such things in their early stage, and believe me, even though I also face this problem many times in my early stage.
So without wasting wasting anymore time let’s directly jumps on the code.
This code gonna be too short because this is such a straightforward project.
You can add whatever video you want from your local device, but if you want one then click this link to get the video.
Video and HTML file-https://drive.google.com/drive/folders/1xOiix0WLtHdKugwpG15q-sC0rrTtMQOp?usp=sharing
Video credits – Video by Enrique Hoyos from Pexels
Step 1) Html code-
<body>
<video autoplay muted loop src="./video.mp4"></video>
<div id="Heading"><h1>Your Text</h1></div>
<button value="Pause">Pause</button>
</body>And our HTML is done now lets move on to CSS-
Step 2) CSS code-
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
video{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#Heading{
position: absolute;
width: 100%;
height: 100%;
background-color: black;
color: white;
text-align: center;
align-items: center;
justify-content: center;
display: flex;
font-size: 8em;
font-family: sans-serif;
font-weight: bold;
mix-blend-mode: multiply;
}
button{
position: absolute;
padding: 10px;
margin: 10px 0 0 10px;
font-weight: bold;
background: white;
border: none;
outline: none;
cursor: pointer;
}
</style>And now you can see a perfect video background in your HTML text
Now we’re also going to make a toggle button for play and pause the video with the help of JavaScript.
Step 3) JavaScript code-
<script>
const button = document.querySelector("button")
button.addEventListener("click", ()=>{
toggleFunc()
})
function toggleFunc(){
if (button.value == "Pause") {
document.querySelector('video').pause()
button.value="Play"
}
else{
document.querySelector('video').play()
button.value="Pause"
}
}
</script>And we’ve done. Now you can see a perfect HTML text with any video background you want
Follow me on Instagram, and also subscribe to our channel to get this kind of awesome projects.
Instagram Link – https://www.instagram.com/Glad__Code
YouTube Link-https://www.youtube.com/channel/UCUoFAwpDK60wK89jz4u6Ldg
GladCode 
Leave a comment