如何在fancybox和videoJS中制作响应式html5视频

Question

如何在fancybox中制作一个html5视频响应已经响应？这是我到目前为止的代码:

<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>

Answer 1

好的,所以它最终需要看起来像这样的视频标签

<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"是修复videojs问题的原因.我没有意识到汽车是一个有效的价值.根据这个http://coolestguidesontheplanet.com/videodrome/videojs/它也使IE9中的东西工作