使视频成为全屏大小的 CSS

Question

我正在使用 videojs.com 视频播放器，它工作得很好，唯一的问题是我希望视频播放器是全屏尺寸，而不是使用像素，例如，如果您在较小的屏幕上，视频播放器看起来很乱向上。我尝试使用 100% 而不是 px 但它也搞砸了很多。有没有其他方法可以让它自动适应整个屏幕？

<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px"
  poster="FF7.png"
  data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
 </video>

Answer 1

在此处检查Codepen

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}