HTML視頻無法填充父div

Question

我想要一個HTML視頻標簽來填充我的卡。 像這樣：

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

但是視頻只是保持原始大小。

我嘗試了以下CSS樣式：

.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;
}

但這仍然行不通。

有任何想法嗎？

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