你怎么得到fancybox / lightbox + video.js v6响应工作？

Question

我发现了一些代码可以让fancybox使用video.js显示视频。当您点击视频链接时，它打开正常但强制固定尺寸并挤压视频或在较小的设备上显示会破坏视图。

<script>
$(function() {

  $('.fancybox').click(function(e) {
    e.preventDefault();

    $.fancybox.open({
      content: '<video id="video" width="' + $(this).attr('data-width') +
      '" height="' + $(this).attr('data-height') +
      '" preload="auto" controls="controls" autoplay="autoplay" class="video-js vjs-default-skin"><source src="'
      + $(this).attr('href') + '" type="video/mp4" /><div>Your browser does not support the HTML5 video tag.</div></video>',
      afterShow: function() {
        // do this for the dynamically loaded video
        videojs('video', {}, function(){
        });
      },
      beforeClose: function() {
        // if you do not do this the video will keep 
        // downloading in the background
        videojs('video').dispose();
      }
    });
  });
});
</script>

我知道这不是为了响应而设计的，但这是目标。这是我编写的示例的链接：     http://dottedi.biz/demo/code/public/vjs/

如何修改它以响应性地工作？