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

playStream()