HTML5视频响应，可定制高度

我对HTML5视频有一个问题，宽度应该是100%，高度应该是60vh（视频需要完全显示，而不是拉伸）

我试过使用

位置：绝对

和

填充：56%

，但似乎不起作用

<div class="item video-one">
      <video id="f-video" class="slide-video slide-media" autoplay="true" loop muted preload="metadata" >
        <source src="<?php the_field('video_url_future_living'); ?>?s=8a71ff38f08ec81efe50d35915afd426765a7526&profile_id=112" type="video/mp4" />
      </video>
    </div>

CSS案例2->不起作用，它是全高的，而且太多了

.item {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.item video { 
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

---

你试过“位置：相对”；宽度：100%；最大高度：60vh；'@案例1或案例2的VelimirTchatchevsky？就是这样，没有绝对定位、疯狂填充或其他任何东西，只是你需要的东西（阅读编辑后）视频需要100%，还是需要保持原始纵横比，同时高度为60vh？@VelimirTchatchevsky OK。谢谢你，伙计。

.item {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.item video { 
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}