I am struggling with creating a two-column row where one column retains its height and size regardless of the window size, while the other should adjust to shrink or stretch based on the window size. Unfortunately, my CSS skills are still at a beginner level, so I haven't been able to figure it out by reading similar answers.
Here is the code snippet I have:
<div class="row upper-row">
<div class="text-column">
<!-- some text here -->
</div>
<div class="video-column">
<div class="video">
<video controls>
<source src="<some source>" type="video/mp4">
</video>
</div>
</div>
</div>
My attempt at using CSS to achieve this has not been successful despite trying techniques like fit-content, object-fit, and flexbox. Here is what I have so far:
.text-column {
width: 500px;
}
.video-column {
min-width: 500px;
}
UPDATE
After experimenting with Bootstrap's auto-layout columns, I have found a solution that seems to work. However, I am facing an issue where the page doesn't overflow once the video reaches its minimum width and instead wraps into a second row. This is the updated HTML and CSS:
<div class="container">
<div class="row upper-row">
<div class="col-lg-auto text-column">
<!-- some text here -->
</div>
<div class="col video-column">
<div class="player-container">
<div class="video">
<video controls>
<source src="<some source>" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
CSS:
.player-container {
width: 90%;
height: 100%;
position: relative;
top: 5%;
left: 4%;
}
.video {
position: absolute;
top: 0%;
left: 0%;
}
video {
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}
With this setup, the text column retains its width while the video column adjusts according to the window size. However, I am still working on resolving the overflow issue after reaching the minimum width for the video column.