css - 防止最大宽度跳跃的视频加载

Question

我试图让视频在加载时不跳跃，我已经应用了这个工作正常的宽高比填充技巧，但是当视频需要最大宽度时，应用的填充似乎太多并且永远不适合。有任何想法吗？

参考链接： https ://css-tricks.com/aspect-ratio-boxes/ https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576

.video-wrap {
  position: relative;
  height: 0;
  padding-top: calc(675 / 1200 * 100%);
}

#tutorial-video {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 600px;
  width:100%;
  height: auto; 
}

<div class="video-wrap">
  <video id="tutorial-video" width="100%" poster="/assets/video-poster.jpg" autoplay loop playsinline>
    <source src="/videos/tutorial.mp4" type="video/mp4">
  </video>
</div>

小提琴： https ://jsfiddle.net/ko1L84b5/2/

标签： cssvideoaspect-ratio