How to place a layer on top of another layer using flexbox? - css

Question

In the snippet below, I have a card. In mobile/tablet, the video sits on top of the text content. In desktop, the content moves to the right, the video to the right.
The video should sit at the vertical center of the content div. I've tried align-items: center;, but it's not working and I think it might have something to do with the video, but I'm not sure.
I'm looking for the cleanest way to vertically align the video container with the content div on the left, then overlay the video container on top of the content div.
This is is the current setup:
// Video Thumbnail Script
$('.vid-thumb').on('click', function () {
$(this).remove();
$('.vid-ct').prepend(
'<script src="https://fast.wistia.com/embed/medias/2uzup7d1l3.jsonp" async><\/script><script src="https://fast.wistia.com/assets/external/E-v1.js" async><\/script><div class="wistia_embed wistia_async_2uzup7d1l3 videoFoam=true" style="width:100%;"> </div>'
);
window._wq = window._wq || [];
_wq.push({
id: '2uzup7d1l3',
onReady: function (video) {
video.play();
}
});
});
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
color: #000a70;
}
a {
text-decoration: none;
}
.img-fluid {
width: 100%;
height: auto;
}
.container {
padding-right: 24px;
padding-left: 24px;
width: 100%;
}
.people-love-nextiva h2 {
font-size: 2.25rem;
line-height: 2.75rem;
font-weight: 900;
text-align: center;
margin-bottom: 2rem;
}
.video-slider {
display: flex;
flex-direction: column;
}
#media (min-width: 1200px) {
.video-slider {
flex-flow: row;
align-items: center;
}
}
.video-slider__video {
order: 1;
}
.video-slider__video .vid-ct {
width: 100%;
}
#media (min-width: 768px) {
.video-slider__video .vid-ct {
min-height: 388px;
}
}
#media (min-width: 992px) {
.video-slider__video .vid-ct {
min-height: 524px;
}
}
#media (min-width: 1024px) {
.video-slider__video .vid-ct {
min-height: 432px;
}
}
#media (min-width: 1200px) {
.video-slider__video {
max-width: 50%;
order: 2;
}
}
.video-slider__content {
padding: 2rem;
background: #F2F5F9;
order: 1;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
display: flex;
flex-direction: column;
}
#media (min-width: 1200px) {
.video-slider__content {
order: 1;
justify-content: center;
height: 600px;
padding: 10rem 18.5rem 10rem 4rem;
}
}
.video-slider__content h6.kicker.kicker--light {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.video-slider__content h4 {
margin-top: 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 900;
}
.video-slider__content p {
margin-top: 1.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.video-slider__content .txt-link {
margin-top: 2rem;
}
.txt-link {
display: inline-flex;
align-items: center;
}
.txt-link a {
color: #005fec;
font-weight: 700;
font-size: 1.125rem;
position: relative;
}
.txt-link a:hover::after {
visibility: visible;
width: 100%;
}
.txt-link a::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: #005fec;
visibility: hidden;
transition: all 0.2s ease;
}
.txt-link img {
height: 0.75rem;
margin-left: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="people-love-nextiva">
<h2>People love Animals.</h2>
<div class="video-slider">
<div class="video-slider__video">
<div class="vid-ct">
<div class="vid-thumb">
<img class="img-fluid vid-thumb-img lazy" loading="lazy" srcset="https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg?auto=format&w=576&h=416 576w,
https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg?auto=format&w=768w&h= 768w"
src="https://nextivaweb.imgix.net/jpg/phat-scooters-video-overlay.jpg&w=576"
sizes="(min-width: 320px) 100vw" alt="Phat Scooters - A Nextiva Customer Success Story">
</div>
</div>
</div>
<div class="video-slider__content">
<h6 class="kicker kicker--light">
Customer Story
</h6>
<h4>Company Name</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, porro.</p>
<span class="txt-link arrow-link">
Read more
<img alt="arrow right icon" class="learn-more-arrow" src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg" loading="lazy">
</span>
</div>
</div>
</div>
</div>

Answer 1

I do not believe there is one "best" solution, as there are multiple solutions, one will probably match better than another according to your HTML structure:
.my-element {
position: absolute;
top: 50%;
transform: translateY(-50%);
// align vertically and horizontally:
// left: 50%;
// transform: translate(-50%, -50%);
}
Another way would be to do it through the flexbox property:
.parent {
display: flex;
}
.parent .child {
margin: auto;
}
And another one through table-cell:
.parent p {
display: table-cell;
vertical-align: middle;
}
To overlay I would probably go with the first solution as it lets you easily play with the position, and then put a z-index to make sure the video is the first layer.
Otherwise (personally dislike) I would play with negative margin on your video container.