Videojs 响应灯箱不工作

Question

我需要一种方法来弹出 VideoJS 灯箱并保持响应。我找到了以下帮助代码： https://github.com/rudkovskyi/videojs_popup 。完美的！除了当我将它与最新版本的 Videojs 一起使用时，它无法正常工作。我得到：

VIDEOJS: ERROR: Improper value "auto" supplied for for width
video.js:489 VIDEOJS: ERROR: Improper value "auto" supplied for for height

在控制台中，它最终会部分损坏。代码在这里：

<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://vjs.zencdn.net/6.2.5/video-js.css" rel="stylesheet">
    <!-- Magnific Popup core CSS file -->
    <link rel="stylesheet" href="css/magnific-popup.css">

    <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
    <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://vjs.zencdn.net/6.2.5/video.js"></script>
    <!-- Magnific Popup core JS file -->
    <script src="js/jquery.magnific-popup.min.js"></script>
    <meta content="">
    <style></style>
    <script>
      videojs.options.flash.swf = "video-js.swf";
      $('document').ready(function(){
        $('.open-popup-link').magnificPopup({
          type:'inline',
          midClick: true
        });
        $('.open-popup-link').on('click',function(){
          videojs('example_video_1').play();
        })
      })
    </script>
    <style>
      .video-js .vjs-tech {
        position: relative;
        height: inherit;
      }
      .player {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        background:black;
      }
    </style>
  </head>
  <body>
    <div class="galleryItem">
      <a href="#test-popup" class="open-popup-link">test</a>
      <div id="test-popup" class="player mfp-hide" style="color:#FFF">
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="metadata" width="auto" height="auto" style="width:100%" data-setup=''>
          <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
            <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
          </video>
        </div>
      <h3>One</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>

  </body>
</html>

我尝试摆弄各种 CS 和 VideoJS 属性，但没有任何乐趣。这是来自弹出脚本开发人员的示例，它确实有效：https://cdn.rawgit.com/rudkovskyi/videojs_popup/master/demo.html 但我认为它使用了一些旧版本的 videojs（不可接受）。

Answer 1

如果您从视频元素中删除 .video-js .vjs-tech 的规则、高度、宽度和样式属性，并改为使用 Video.js 的流畅模式，这将起作用：

<video id="example_video_1" class="video-js vjs-default-skin vjs-fluid" controls preload="metadata" data-setup=''>

http://jsbin.com/qajeqim/edit?html,output

Videojs 响应灯箱不工作

Videojs Responsive Lightbox Not Working

html

javascript

css

lightbox

video.js