title: Videojs Responsive Lightbox Not Working
body: <p>I need a way to popup VideoJS a lightbox and keep it responsive. I found the following helper code: <a href="https://github.com/rudkovskyi/videojs_popup" rel="nofollow noreferrer">https://github.com/rudkovskyi/videojs_popup</a> . Perfect! Except that when I go to use it with the latest version of Videojs, it doesn't work properly. I get:</p>
  
  <pre><code>VIDEOJS: ERROR: Improper value "auto" supplied for for width
  video.js:489 VIDEOJS: ERROR: Improper value "auto" supplied for for height
  </code></pre>
  
  <p>in the console and it winds up partially breaking. Code here:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="https://vjs.zencdn.net/6.2.5/video-js.css" rel="stylesheet"&gt;
      &lt;!-- Magnific Popup core CSS file --&gt;
      &lt;link rel="stylesheet" href="css/magnific-popup.css"&gt;
  
      &lt;!-- jQuery 1.7.2+ or Zepto.js 1.0+ --&gt;
      &lt;!--&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;--&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://vjs.zencdn.net/6.2.5/video.js"&gt;&lt;/script&gt;
      &lt;!-- Magnific Popup core JS file --&gt;
      &lt;script src="js/jquery.magnific-popup.min.js"&gt;&lt;/script&gt;
      &lt;meta content=""&gt;
      &lt;style&gt;&lt;/style&gt;
      &lt;script&gt;
        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();
          })
        })
      &lt;/script&gt;
      &lt;style&gt;
        .video-js .vjs-tech {
          position: relative;
          height: inherit;
        }
        .player {
          width: 80%;
          margin-left: auto;
          margin-right: auto;
          background:black;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="galleryItem"&gt;
        &lt;a href="#test-popup" class="open-popup-link"&gt;test&lt;/a&gt;
        &lt;div id="test-popup" class="player mfp-hide" style="color:#FFF"&gt;
          &lt;video id="example_video_1" class="video-js vjs-default-skin" controls preload="metadata" width="auto" height="auto" style="width:100%" data-setup=''&gt;
            &lt;source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /&gt;
              &lt;p class="vjs-no-js"&gt;To view this video please enable JavaScript, and consider upgrading to a web browser that &lt;a href="http://videojs.com/html5-video-support/" target="_blank"&gt;supports HTML5 video&lt;/a&gt;&lt;/p&gt;
            &lt;/video&gt;
          &lt;/div&gt;
        &lt;h3&gt;One&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried fiddling with various CS and VideoJS properties but no joy. Here's the example from the popup script's developer that does work: <a href="https://cdn.rawgit.com/rudkovskyi/videojs_popup/master/demo.html" rel="nofollow noreferrer">https://cdn.rawgit.com/rudkovskyi/videojs_popup/master/demo.html</a> but I think it's using some older version of videojs (Unacceptable).</p>