title: How to make responsive html5 video in fancybox and videoJS
body: <p>How can I make a html5 video responsive inside fancybox which is responsive already? This is the code I have so far :</p>
  
  <pre><code>&lt;a class="preview" href="#inline123"&gt;
      &lt;img class="item" src="/thumbs/thumb.jpg" width="{_file.IMAGE_W}" height="{_file.IMAGE_H}"&gt;
  &lt;/a&gt;
  
  &lt;div style="display: none;"&gt;
      &lt;div id="inline123"&gt;
          &lt;video class="video-js vjs-default-skin vid" style="width: 100% !important; height: auto !important;" controls poster="/thumbs/thumb.jpg" preload="none" id="123"&gt;
              &lt;source src="/video/video.mp4" type="video/mp4"&gt;
              &lt;source src="/video/video.webm" type="video/webm"&gt;
          &lt;/video&gt;
          &lt;script&gt;
          // &lt;![CDATA[
          $(".preview").fancybox({
              'beforeShow': function(){
                  $(window).on({
                      'resize.fancybox' : function(){
                          $.fancybox.update();
                      }
                  });
               },
               'afterClose': function(){
                    $(window).off('resize.fancybox');
               },
               width      : '640',
               height     : '360',
               fitToView  : true,
               closeClick : false,
               openEffect : 'none',
               closeEffect: 'none',
               closeBtn   : 'true',
               scrolling  : 'no',
          });
          // ]]&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>