How to make a responsive video on a website?

Question

css

The main screen is divided into 2 parts (in the ratio of 30% - text, 70% - video):

<main class="hero">
  <div class="hero_title">
    <h1>lorem  lorem  lorem !</h1>
 		<h2>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</h2>
  </div>
  <div class="hero_video">
    <div class="video">
      <video class="video" loop="" autoplay="" muted="" playsinline="" poster="video.jpg">
          <source src="video.mp4" type="video/mp4">
          <source src="video.ogv" type="video/ogv">
          <source src="video.webm" type="video/webm">
        </video>
      </div>
    </div>
  </main>

main {
    display: grid;
    grid-template-columns: 30% 70%;
}

How to make a video stretch like a picture with the cover property)? And not like this:

Answer 1

I wonder if object-fit: cover will work?
like so
video{
width:100%;
height: 100%;
object-fit:cover;
}