时间戳

首页 > 解决方案 > 如何将模态 video.js 播放器响应式地放入视口？

html - 如何将模态 video.js 播放器响应式地放入视口？

问题描述

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

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

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

这是一个最低限度的代码模板（也在这个 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>

标签： htmlcssresponsive-designvideo.js

解决方案

推荐阅读