Question

我想添加一个模态video.js播放器，即：

与视频具有相同的长宽比（视频具有不同的长宽比）
位于视口中心
如果视频的尺寸（宽度，高度和高度均小于视口）
- 具有视频的大小
如果视频的尺寸（宽度，高度和高度均大于视口）
- 缩小到适合视口的最大尺寸

我尝试了对视频播放器本身进行样式设置以及对div进行了样式设置。我尝试了video.js和vjs-fluid内置的vjs-fill。以及以上的许多组合-无济于事。

该问题的解决方案是什么样的？

这是一个最低限度的代码模板（也在this JSFiddle中）：

.video-js {
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>How to fit modal video.js player responsively into viewport?</title>
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
</head>

<body>
  <article>
    <h1>
      Lorem Ipsum
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
      in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </article>
  <video id="my-player" class="video-js vjs-fluid" controls preload="auto" poster="https://vjs.zencdn.net/v/oceans.png" data-setup='{}'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    </source>
    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    </source>
    <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    </source>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
      </a>
    </p>
  </video>
</body>

</html>

如何将模式video.js播放器自适应地放入视口？

0 个答案: