Bootstrap 5 how to make video size responsive-CodePudding

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 >
    <div >
      <div >
        <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  >
        <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

CodePudding user response：

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 >
  <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>

Official Bootstrap Docs - embed

CodePudding user response：

.video_div{
  margin-left: -210px;
}
@media (max-width:1199px){
  .video_div{
    margin-left: -270px;
  } 
}

<div >
    <div >
      <div >
        <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  >
        <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>