Bootstrap 5 how to make video size responsive - html

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

.video_div{
margin-left: -210px;
}
#media (max-width:1199px){
.video_div{
margin-left: -270px;
}
}
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-12">
<div class="video_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-5 col-md-12 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>

Answer 2

You can Wrap any video tag in a parent element with .embed-responsive and an aspect ratio. The video tag can be given a .embed-responsive-item class as well
<div class="embed-responsive embed-responsive-21by9">
<video class="embed-responsive-item" 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>
Official Bootstrap Docs - embed

Answer 3

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/bootstrap#5.0.2/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>