I am facing an issue with positioning text over a video in HTML. It displays correctly on my laptop screen, but when I switch to a different device size using the toggle device toolbar, the text goes down while the video stays in its place. How can I dynamically set the text over the video in HTML?
Here is my code:
<video loop="loop" style="position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;" autoplay muted>
<source src="/assets/images/sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<section id="hero" class="d-flex align-items-center">
<div class="container" data-aos="zoom-out" data-aos-delay="100">
<h1>University Courses</h1>
<h3>YOUR FIRST CHOICE IN ARABIC AND ISLAMIC STUDIES</h3>
<div class="d-flex">
<a href="#about" class="btn-get-started scrollto" style="font-size: 18px;">ENQUIRE HERE<i class="fas fa-arrow-right" style="padding-left: 5px;"></i></a>
</div>
</div>
</section>
And here is my CSS:
#hero {
position: absolute;
top: 40%;
width: 100%;
padding: 20px;
}
#hero h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
line-height: 56px;
color: #fff;
font-family: "Poppins", sans-serif;
text-align: center;
}