How to display 2 column layout with video and the other with text call to action. Video and text div should stack on top of each other at different screen sizes at equal height.
Mine is stacking on top of each other but not at equal height. See the code below:
.bt-wrapper2 {
margin: 0px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex: 1;
}
.blue-column {
background-color: blue;
height: 100%;
}
.red-column {
background-color: red;
height: 100%;
padding: 40px;
}
@media screen and (max-width: 800px) {
.row {
flex-direction: column;
height: 100%;
}
.blue-colum {
height: 100%;
}
}<div class='bt-wrapper2'>
<div class='row'>
<div class='column'>
<div class='blue-column'>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class='column'>
<div class='red-column'>
<h2>Red Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>Watch today</button>
</div>
</div>
</div>
</div>