How to make video shrink and stretch with window size?

Question

I have a two-column row in which I want one row—which contains some text—to keep it's height and size independent of the window size, and the other—which contains the video—to shrink and stretch with the window size.

I'm too much a beginner with CSS to have a better idea of how to do this by reading related answers here.

Here's the HTML. I didn't set height or width for the video because I want it to be variable and have the whole page overflow after the video's minimum width.

<!-- Originally tried with bootstrap grid, but that didn't work, that's why the class names -->
<div class="row upper-row">
  <div class="text-column">
    <!-- some paragraphs -->
  </div>
  <div class="video-column">
    <div class="video">
      <video controls>
        <source src="<some source>" type="video/mp4">
      </video>
    </div>
  </div>
</div>

Attempt at CSS:

Styles for the video are almost empty because, after trying so many things, nothing has worked and are too much to list here. I read about fit-content , object-fit , tried to use flexbox , but can't make this work.

.text-column {
  width: 500px;
}

.video-column {
  min-width: 500px;
}

UPDATE

Before seeing the three answers posted so far, I had started trying with Bootstrap's auto-layout columns, and it seems to work. The only thing that I haven't been able to sort out is that, after the video has reached it's min-width , the page doesn't overflow; instead, the video is wrapped into a second row and everything becomes a mess.

I have been reading a bit about the methods from the answers provided and I will checkout to a previous commit to try them. For now, this is what I have done. I have added a couple things, but the main content is the same.

HTML:

<div class="container">
    <div class="row upper-row">
        <div class="col-lg-auto text-column">
        <!-- some paragraphs -->
        </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 {
    /*This width seems to control the actual video size. If I use 100%, it allows the video to get too big and overflow the screen.*/
    width: 90%;
    /*This is the height that seemed most appropriate for this div to actually contain the video height*/
    height: 100%;
    /*I use this position because I am overlaying some things on the video*/
    position: relative;
    top: 5%;
    left: 4%;
}

.video {
    /*This is to do the overlap*/
    position: absolute;
    top: 0%;
    left: 0%;
}

video {
    min-width: 10%;
    max-width: 100%;
    min-height: 10%;
    max-height: 100%;
}

With this, the text-column stays the same width and the video column successfully shrinks with the window, but, as I said, it doesn't overflow after the min-width has been reached.

Answer 1

You can achieve this by using media queries in css or giving the container your desired width and height auto it will make it also responsive

Answer 2

There are many ways to achieve a two columns layout. In my opinion, the simplest solution is with flex .

Solution on Codepen

However, I don't recommend this kind of solution since it's not responsive, as it does not scale well with the size of the screen and doesn't work well on mobile.

For a better solution, you would most likely cover the width of the whole screen with the 2 columns and just resize the video element as needed.

Better solution on Codepen

You could also make this work with a Grid layout instead of Flex.

Here is a good guide on how to realize common layouts with CSS grid.

Answer 3

You can use % for the responsiveness of your video.

.video-column video { width: 100%; }