I am experimenting with having text displayed over a video background that adjusts to different screen sizes. I want the text to fill up the entire screen regardless of the browser size. What would be the most effective way to achieve this?
Currently, I have a div with a className = "video-text large medium small" and some paragraph tags inside it. Additionally, I have CSS in Index.css that includes media queries for different screen sizes.
While this approach initially seemed to work, it appeared clunky when transitioning between various screen sizes. Is there a more efficient method to accomplish this design requirement?
By the way, this setup is no longer functioning properly and I'm unsure what could be causing the issue.
This is the content of my AboutComponent.js:
<div
style={{
position: "relative",
textAlign: "center",
}}
>
<video
loop
autoPlay
muted
id="video"
style={{
height: "100vh",
width: "100vw",
objectFit: "cover",
position: "relative",
pointerEvents: "none",
}}
>
<source src={Video} type="video/mp4" />
</video>
<div className="video-text large medium small">
<p>
Aloha, I’m a front-end developer located on the island of Oahu,
Hawaii. I have a serious passion for technology and learning all the
things to make technology work for me.
</p>
<br />
<p>
When i’m not tinkering with the latest gadget, you can find me
surfing Hawaii's waves, on a beach volleyball court or vacationing
at a ski resort breaking another collar bone.
</p>
<br />
<p>
Other than sports and technology, I am very much a family person and
faith oriented. Both keep me grounded and make me want to be the
best version of myself.
</p>
<br />
<p>
Overall, im trying to meet like-minded people who can mentor me to
make me a stronger Web Developer, a smarter employee and a more
wholesome and selfless person in general.
</p>
</div>
</div>
This is the content of my Index.css:
@media (min-width: 992px) {
.large.video-text {
font-size: 2rem;
}
}
@media (min-width: 768px) {
.medium.video-text {
font-size: 1.7rem;
}
}
@media (min-width: 576px) {
.small.video-text {
font-size: 1.5rem;
}
}
.video-text {
color: white;
position: absolute;
text-align: center;
top: 0;
padding: 60px;
font-weight: bold;
font-size: 1.3rem;
}
Here is a visual representation: https://i.sstatic.net/c4zU9.png
https://i.sstatic.net/cMse5.jpg
(Apologies for the small image sizes, larger screenshots were too big to include)