HTML/CSS - 如何使全屏 videoJS 播放器适合浏览器窗口？

Question

我正在使用 VideoJS 在全屏页面上显示视频，如下所示：

        <div class="container-fluid">
            <div class="row">
                <div class="player-center">
                    <video-js autoplay id=player class="vjs-fluid" controls="true">
                        <source src="{{ playlist_url }}" type="application/x-mpegURL">
                    </video-js>
                    <script src="{% static 'videojs/video.js' %}"></script>
                    <script src="{% static 'videojs/videojs-http-streaming.js' %}"></script>
                    <script>
                        var player = videojs('player',
                            {fill: true},
                            {autoplay: true},
                            {preload: true});
                        player.play();
                    </script>
                </div>
            </div>
        </div>

现在的问题是浏览器窗口是可滚动的，因为内容似乎被拉伸以适应窗口，请参见下图，例如 。

为了比较，我检查了 Netflix 播放器，他们似乎做得对，所以内容总是像这样适合窗口：

我的播放器中心类目前如下所示：

.player-center {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

但我不明白为什么内容总是被拉伸得如此之大。我已经厌倦了禁用一些 VideoJS 选项，例如 {fill: true}，设置为 false 但没有明显效果。

提前致谢:)

Answer 1

试试这个：

.player-center {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100vh;
}

我只是试试这个，但使用图片jsFiddle