How can I make video size responsive with CSS Bootstrap grid?

Question

I have a Bootstrap grid with three rows, and the middle one has two columns. In the first column I want to display a list of captions for the video and, in the other one, the video. I'm trying to have a fixed width for the left column (captions) and a responsive width in the right column (video), but haven't been able to. What I have right now is something like this:

Full window size:

Here the only content in the whole page is the video, which I did for simplicity and to isolate the problem in this question. I've added colored borders to some elements to better show the behavior I'm getting.

What I'm looking for is to have the video expand to a maximum of 120% of its width when there is space, and, when the window is shrinked, shrink with it, but only until it reaches 80% of its width. When this happens, I would like it to stay at that width and have the whole div.container overflow the page with scroll. I'll do my best to illustrate this with images and make sure I'm giving a good explanation.

Full window size (not real, haven't accomplished):

Window shrunk (not real, haven't accomplished)

This would be the minimum width, at which the whole content should start to overflow with scroll.

I don't need anything to shrink vertically, it can always overflow.

HTML:

<body>
    <div class="container displayer-container">

      <div class="row top-row">
        <!-- Some content in the top row. -->
      </div>
      <!-- https://stackoverflow.com/questions/41943463/prevent-wrapping-stacking-of-columns-in-bootstrap-when-shrinking-the-size/41943639 -->
      <div class="row flex-nowrap mid-row">
        <div class="caps-container">
          <div class="cap-list">

          </div>
        </div>

        <div class="col player-container">
          <div class="video">
            <video controls>
              <source src="some_video.mp4" type="video/mp4">
            </video>
          </div>
        </div>
      </div>

      <div class="row bottom-row">
        <!-- Some content in the bottom row.-->
      </div>

    </div>
  </body>

CSS:

html {
  width: 100%;
  height: 100%;
}

body {
  /* background-color: rgb(30, 30, 30); */
  background-color: white;
  min-width: 100%;
  min-height: 100%;
  padding: 0% 1%;
}

.container {
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 100%;
  border: 1px solid yellow;
  overflow-y: scroll;
}



.mid-row {
 border: 1px solid green;
}

.caps-container {
  width: 550px;
  height: 550px;
  overflow-y: scroll;
}






.player-container {
  border: 1px solid red;
  width: 100%;
}

.video {
  border: 1px solid blue;
  width: 100%;
  height: auto;
}

video {
  min-width: 80%;
  max-width: 120%;
}

However, in full size, the size of the video is not 120%, it's 100%. And when I shrink the window, the video shrinks when all the surrounding divs reach it, and shrinks way past 80% and it also overflows all the divs, like this:

In short, I'm having two problems. One is making the video have the min-width and max-width I'm giving it, and the other is that it's overflowing it's container and all the ancestor containers. What makes it shrink is not the lack of available space in its parent container, but the lack of available space in the whole page.

I did my first try at this some time ago and managed to position the video the way I wanted using position: absolute for its container and position: relative for itself. But I ran into the same responsiveness problem and I'm trying again from scratch.

Sebastian Tibichi · Accepted Answer · 2021-10-03 21:14:00Z

1

You can vh unit of measure to scale your containers relative to viewport's height and Bootstrap grid to do display the column on the width of the browser's window. You can learn more here:
https://css-tricks.com/fun-viewport-units/

The .caps-container fixed width can be done by overwriting flex value from Bootstrap .col. On the final style, you don't have to add !important, just keep the custom style after the Bootstrap one. In here it's the other way around.

Take a look at this DEMO:
The CSS is kept to a minimum to you can debug it easier.

.top-row {
  height: 10vh;
}
.bottom-row {
  height: 10vh;
}
.caps-container,
.player-container {
  height: 80vh;
}
.caps-container {
  flex: 0 0 300px !important; /* fixed width */
  overflow-y: auto;
}
.cap-list {
  height: 300vh; /* scroll test */
}
.video {
  max-width: 150vh;
  margin: 0 auto;
}
video {
  width: 100%;
  display: block;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid displayer-container">

  <div class="row bg-dark bg-opacity-10 text-center p-3 top-row">
    <!-- Some content in the top row. -->
  </div>
  <div class="row mid-row">
    <div class="col bg-dark bg-opacity-25 caps-container">
      <div class="cap-list py-3">
        <h5>Scrollable Cap List</h5> 
        <p>Vestibulum lacinia ligula tincidunt leo vehicula vulputate. Nullam maximus vestibulum felis. Ut nec egestas est. Cras vestibulum, lorem nec consectetur molestie, augue magna mollis metus, sed varius elit orci a mauris. Vestibulum at risus at magna malesuada ornare id et elit.</p>
      </div>
    </div>

    <div class="col py-3 player-container">
      <div class="video">
        <video controls>
          <source src="some_video.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>

  <div class="row bg-dark bg-opacity-10 text-center p-3 bottom-row">
    <!-- Some content in the bottom row.-->
  </div>

</div>

edited Oct 3, 2021 at 21:14

answered Oct 3, 2021 at 19:16

Sebastian Tibichi

2711 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

TheSprinter Over a year ago

This works great to avoid the overflowing of the <video>. I hadn't used width: 100% on the <video> because it could be too small and the available space too big to stretch it that much. I'm trying with it again and I don't get the overflow, but I'm still not able to apply the min-width to it. Why do the min-width and max-width not apply here? How can I accomplish that? I'd like it to stop shrinking when it reaches 80% and make the whole page overflow with scroll.

Sebastian Tibichi Over a year ago

Why do you need min and max width? Just use the parent container. This is why I've added width: 100%;.

TheSprinter Over a year ago

Right. Do you mean controlling the max-width and min-width of the parent container instead of those of the <video>? I need to control the size of the video so it doesn't stretch too much if it's small, and so it doesn't become too small when shrinking a lot. Actually, I had been thinking about using .ajax to send the intrinsic size of the video to the browser and then applying min-width and max-width to the parent with JavaScript. Does that sound like something reasonable?

Sebastian Tibichi Over a year ago

For max-width, I think it's ok because you don't want the video to become too large and not have enough room at the bottom. You should give these value in pixels or other unit of measure. But not percent, because it won't do what you hope.

Sebastian Tibichi Over a year ago

If the viewports height is smaller, it helps so the video doesn't go over .bottom-row.

|

Collectives™ on Stack Overflow

How can I make video size responsive with CSS Bootstrap grid?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related