HTML Video not filling parent div

Question

I want a HTML video tag to fill my card. Like this:

<ion-card>
  <ion-card-header>
    <ion-card-title>Ion Videp</ion-card-title>
  </ion-card-header>
    <div class="video-wrapper">
      <video #video controls="controls" class="video" autoplay="autoplay">
        <source src="../../../assets/push-ups.mp4" type="video/mp4" />
      </video>
    </div>
</ion-card>

But the Video just keeps the original size.

I tried these css styles:

.video-wrapper {
    position: relative;
    height: 200px;
}

.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

But it still won't work.

Any Ideas?

Answer 1

.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100vw; /* you can changes size*/
    min-height: 100vh;
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}