How can I make these two divs with text responsive? - html

Question

I have two divs like this :
<div id="splash-container">
<video id="splash-video" preload autoplay loop muted>
<source src="videos/splash.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div id="splash-message">MAYUR BHADRACANT</div>
<div id="splash-submessage">ONLINE PROFILE</div>
</div>
I want the splash-message to show on top of the splash-submessage like this:
http://prntscr.com/bcxu1r
But when I resize the browser: this happens:
http://prntscr.com/bcxuec
My current css right now is:
#splash-container {
position: relative;
overflow: hidden;
width: 100vw;
max-width: 100%;
min-height: 100px;
text-align: center;
margin: 0 auto;
}
#splash-message {
position: absolute;
font-weight: bold;
z-index: 1;
color:white;
font-weight: 300;
letter-spacing: 7px;
left: 0;
width: 100%;
text-align: center;
font-size: 35.5px;
top:40vh;
}
#splash-submessage {
position: absolute;
color: white;
z-index: 1;
font-weight: 300;
letter-spacing: 7px;
left: 0;
width: 100%;
text-align: center;
font-size: 22px;
top:50vh;
}
Any help is appreciated, thanks!

Answer 1

With Flexbox you can center message and submessage and you can use position: absolute on video to remove it from elements flow and then use transform: translate() to center it.
body,
html {
margin: 0;
padding: 0;
}
#splash-container {
display: flex;
height: 100vh;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
}
video {
border: 1px solid black;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div id="splash-container">
<video id="splash-video" preload autoplay loop muted>
<source src="videos/splash.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div id="splash-message">MAYUR BHADRACANT</div>
<div id="splash-submessage">ONLINE PROFILE</div>
</div>