In the code snippet provided below, you may notice that when the screen size is less than 768px, the video and content underneath it are visible. However, as soon as the screen size exceeds 768px, the video disappears.
Have you ever wondered why the video vanishes when transitioning from flex-direction: column; to flex-direction: row;?
Click here for the Codepen link if you prefer...
/* 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;
}
.container {
padding-right: 24px;
padding-left: 24px;
width: 100%;
}
.people-love-cats 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: 768px) {
.video-slider {
flex-direction: row;
}
}
.video-slider__video {
/* embed video */
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-slider__video iframe,
.video-slider__video object,
.video-slider__video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-slider__content {
padding: 2rem;
background: #f2f5f9;
}
.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;
}<div class="container">
<div class="people-love-cats">
<h2>People love Cats.</h2>
<div class="video-slider">
<div class="video-slider__video">
<iframe src='https://www.youtube.com/embed/2acZIOSV9LY' frameborder='0' allowfullscreen></iframe>
</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. Beatae, maiores.</p>
<span class="txt-link arrow-link">
<a href="#">Read more</a>
<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>