I'm facing a challenge with setting my text background as a video. Despite my efforts, the text remains hidden behind the video and doesn't come to the front. Additionally, I'm encountering an issue where the video background does not adapt responsively on smaller screens, covering the entire screen. It also appears that the video's frame width and height are altered and do not play in their original ratio.
Is there anyone who could assist me in resolving this issue?
Here is the HTML code:
<div class="container-fluid no-left-padding no-right-padding welcome-text video-content">
<!-- Container -->
<div class="container">
<video autoplay muted loop>
<source src="assets/videos/welcome_video.mp4" type="video/mp4">
</video>
<h2>Hello, I want to display this text, and play the video on background.
</h2>
</div>
</div>
And here is the corresponding CSS code:
.welcome-text {
padding-bottom: 180px;
padding-top: 180px;
}
.video-content{
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
video{
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}