Video in a responsive square column

An impressive background effect with a few lines of CSS (complete code example and demo)

The result to obtain is shown in the cover image above. The first and third columns contain images having an equal aspect ratio (almost squared), while the column in the middle shows a video, a moving background.

You can see the effect in action on this demo page.

In the demo, the columns are responsive, i.e., the images and the video box scale smoothly with the browsers’ window width — while maintaining the same aspect ratio.

Figure 1 — Width threshold toggles between two layouts

When the browsers’ viewport width is small (under a certain threshold, like in smartphones), the three columns wrap one on top of the other and form a vertical column having full width, as shown in Figure 1.

1. Here are the HTML and CSS

There are many ways to achieve responsive layouts for columns in rows; in the example below, Bootstrap 5 is used (other CSS approaches work similarly). Here is the code snippet for the row with the three artistic columns.

<div class="row g-0 mx-0">
  <div class="col-sm-4">
    <img src=".../foto1.jpg" width="100%">
  </div>
  <div class="col-sm-4">
    <div class="video-wrapper">
      <video playsinline autoplay muted loop src=".../videohome.mp4"></video>
    </div>
  </div>
  <div class="col-sm-4">
    <img src=".../foto2.jpg" width="100%">
   </div>
 </div>

Nothing fancy here: apart from some Bootstrap classes for responsive columns inside a div; for the class row, g-0 means no “gutters” (i.e., no space between columns), and mx-0 means no horizontal margins. The only thing worth noting is the video-wrapper div. This wrapping container frames the video portion, visible in its responsive column.

The CSS is more interesting:

.video-wrapper{
    width: 100%; 
    height: 100%; 
    display: block; 
    position: relative; 
    overflow: hidden;
}

.video-wrapper video{
    position: absolute; 
    top: 0px; left: 0px;
}

@media (max-width:576px) {
    .video-wrapper{
        min-height: 100vw;
    }    
}

The video-wrapper class clips the video in the responsive column via the CSS command overflow: hidden. The class tells the wrapper to be 100% of its parent width and height; this is crucial, or the video will not appear.

The wrapper’s position: relative allows the video tag to have position: absolute so that one can decide which portion of the video canvas is visible in the column box (setting the left and top properties to the desired [negative] values).

2. What about the media query?!

When the HTML page with the three columns is displayed on screens wider than 576 pixels (corresponding to the “small” breakpoint for Bootstrap 5), the columns' height and width are well determined. They depend on the browser viewport’s width but always have a precise value. The video-wrapper class tells the wrapper to be 100% the size of these values, the video is framed correctly, and no further information is needed for the row layout.

The three columns are piled up when the page is displayed on a screen smaller than 576 pixels, as shown in Figure 1. The screen width constrains the width of each image box, but what about their height?

It is necessary to tell the video wrapper its minimal height; otherwise, the height will be undetermined, and the video will not show up! Note that the min-height is set to 100% of the viewport’s width.

3. Conclusions

We hope you enjoyed this HTML+CSS solution: to get the result, we had to gather bits and pieces around blogs and SO. Let us know if you come up with similar CSS issues.