How to make responsive html5 video in fancybox and videoJS

Question

How can I make a html5 video responsive inside fancybox which is responsive already? This is the code I have so far :

<a class="preview" href="#inline123">
    <img class="item" src="/thumbs/thumb.jpg" width="{_file.IMAGE_W}" height="{_file.IMAGE_H}">
</a>

<div style="display: none;">
    <div id="inline123">
        <video class="video-js vjs-default-skin vid" style="width: 100% !important; height: auto !important;" controls poster="/thumbs/thumb.jpg" preload="none" id="123">
            <source src="/video/video.mp4" type="video/mp4">
            <source src="/video/video.webm" type="video/webm">
        </video>
        <script>
        // <![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',
        });
        // ]]>
    </div>
</div>

Solution

Ok so it ended up the video tag needed to look like this

<video class="video-js vjs-default-skin vid" controls poster="/image/poster.jpg" preload="none" id="123" width="auto" height="auto" style="width:100% !important; height:auto !important">

width="auto" height="auto" is what fixes the videojs problem. I didn't realize that auto was a valid value. According to this http://coolestguidesontheplanet.com/videodrome/videojs/ it also makes things work in IE9

Comments

[JFK]

if #inline123 has a fixed width, then it isn't responsive, is it?

[Jizbo Jonez]

Yes I removed that in the meantime and I have edited my code above to reflect where I am at now. I had to get past an 'isotope' jquery plugin problem which I was able to do using info from this post - stackoverflow.com/questions/22433718/… In particular using the beforeShow and afterClose methods. I'm also using videoJS with my videos and that is also causing a problem. With videoJS disabled everything is working correctly. So now to re-enable videoJS and see if I can stop it conflicting with the responsiveness.

[Jizbo Jonez]

Yes I already have that part working fine, it is videoJS causing the problem. Without videoJS enabled everything works, with it enable I lose responsiveness.