Correctly using a Video as Background - html

Question

I am trying to use a Video as a Background in a loop and muted. The Problem is, that i want to have a heading and subheading centered over the video. Although when using something like position: absolute on the video it breaks the complete responsiveness of the page.
I tried putting absolute position on the video, which does work if it shouldnt be responsive. Also tried something with relative position, although then the text is at the right side of the video (because its the second flex item in the row). How is the correct approach to center text over a background video? For images i tend to use the background-image tag, which according to my research, does not work for videos.
<div className='homeImage'>
<video loop autoPlay muted>
<source src={video} type="video/mp4"/>
</video>
<div className='home-content'>
<h1 className='mb-4'>My Name</h1>
<h2>This is a blog</h2>
</div>
</div>
.homeImage{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.home-content{
height: 100vh;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home-content h1{
font-size: 90px !important;
color: #fff !important;
z-index: 10;
}
.home-content h2{
font-size: 40px !important;
color: #fff !important;
z-index: 10;
}
.homeImage img,video{
opacity: 0.5;
height: 100vh;
z-index: 0;
width: 100%;
object-fit: cover;
position: absolute;
}
#media (max-width: 767px){
.home-content h1{
font-size: 60px !important;
}
.home-content h2{
font-size: 35px !important;
}
}
#media (max-width: 497px){
.home-content h1{
font-size: 30px !important;
}
.home-content h2{
font-size: 20px !important;
}
}
This is how it looks after modifying the CSS:
So its sadly still not responsive

Answer 1

To position text over a video (or img for that matter). You can wrap the text and video in a div (which you've already done). Make the div position: relative; and position the text with position: absolute;. This way the content stays in the flow of the page, while allowing you to position the text however you want!
.homeImage{
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/* added code */
position: relative;
}
.home-content{
height: 100vh;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* added code */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.home-content h1{
font-size: 90px !important;
color: #fff !important;
z-index: 10;
}
.home-content h2{
font-size: 40px !important;
color: #fff !important;
z-index: 10;
}
.homeImage img,video{
opacity: 0.5;
height: 100vh;
z-index: 0;
width: 100%;
object-fit: cover;
/* remove position: absolute; from here*/
}
#media (max-width: 767px){
.home-content h1{
font-size: 60px !important;
}
.home-content h2{
font-size: 35px !important;
}
}
#media (max-width: 497px){
.home-content h1{
font-size: 30px !important;
}
.home-content h2{
font-size: 20px !important;
}
}
<div className='homeImage'>
<video loop autoPlay muted>
<source src={video} type="video/mp4"/>
</video>
<div className='home-content'>
<h1 className='mb-4'>My Name</h1>
<h2>This is a blog</h2>
</div>
</div>