Bootstrap 5 how to make video size responsive

Question

I have a very simple page in which have 2 columns. video and content i need to do width and height responsive something like image-fluid.

My code

 <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-6">
        <div>
          <video muted="" autoplay="" loop=""
            src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"
            width="950">
            <img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast">
          </video>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 align-self-center" >
        <h3>Fast</h3>
        <p>Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
        </p>
      </div>
    </div>
  </div>

Like this

Answer 1

If you are using Bootstrap 5, you can use the ratio helper :

Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s. These helpers also can be used on any standard HTML child element (e.g., a or ). Styles are applied from the parent .ratio class directly to the child.

source : https://getbootstrap.com/docs/5.0/helpers/ratio/

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

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>