NOTICE: FORUMS MOVING

Thank you for visiting and participating in the Video.js forums. We are currently moving the forums to Stack Overflow and GitHub Issues. If you have a question or need help with Video.js, please post your question on Stack Overflow and add the tag 'video.js'. If you've found a specific bug in Video.js, please submit it in the issues tracker.

You can read more about this move on the blog.

Video does not resize with browser

James B.'s Avatar

James B.

20 Apr, 2012 02:28 PM

Hi
Can someone tell me of a way to make the video size responsive, ie adjust size with the browser?

  1. 1 Posted by ben on 27 Apr, 2012 02:30 AM

    ben's Avatar

    Anyone?

  2. 2 Posted by Dominik Habicht... on 29 Apr, 2012 12:35 PM

    Dominik Habichtsberg's Avatar

    I'm not sure if this is what you want but I needed to create a solution to fill the whole borwsers background and avoiding black-spaces if the video-ratio doesn't fit the browsers client-ratio. This might be a bit dirty but it worked for me.
    Important: You need to know the exact width an height of the video-file so that the ratio can by calculated.

    HTML:

    <div id="video-home">
        <div id="video_content"></div>
    </div>
    

    CSS:

    #video-home {
        position: absolute;
        top: 0;
        left: 0;
    
        width: 100%;
        height: 100%;
    
        overflow: hidden;
        z-index: 1000;
    }
    

    JS:

    $('#video-home').html('<video id="video-home-player" class="video-js vjs-default-skin"><source type="video/mp4" src="%video_file%.mp4"><source type="video/ogg" src="%video_file%.ogv"><source type="video/webm" src="%video_file%.webm"></video>');
    
    var videoRatio = 1080 / 1920; //Video originalHeight divided be video originalWidth
    var myPlayer = null;
    myPlayer = _V_('video-home-player', {
        'controls' : false,
        'autoplay' : true,
        'preload'  : 'none'
    }).ready(function() {
        myPlayer_followBrowsersize();
    });
    
    function myPlayer_followBrowsersize() {
        tmp_windowRatio = $(window).height() / $(window).width();
        if (videoRatio > tmp_windowRatio) {
            tmp_height = Math.round($(window).width() * videoRatio);
            myPlayer.size($(window).width(), tmp_height);
            $('#video-home-player').css({
                'marginTop' : -Math.round((tmp_height - $(window).height()) / 2),
                'marginLeft' : 0
            });
        } else {
            tmp_width = Math.round($(window).height() * (1 / videoRatio));
            myPlayer.size(tmp_width, $(window).height());
            $('#video-home-player').css({
                'marginTop' : 0,
                'marginLeft' : -Math.round((tmp_width - $(window).width()) / 2)
            });
        }
    }
    $(window).bind('resize', myPlayer_followBrowsersize);
    
  3. 3 Posted by Dominik Habicht... on 29 Apr, 2012 12:40 PM

    Dominik Habichtsberg's Avatar

    P.S: It got to my attention, that the "

    " within the #video-home is deprecated. This resultet out of one of my first test-runs through issues with Internet-Explorer 7 & 8 (which still occur but don't base on my resize-script)
  4. 4 Posted by Ryan on 07 Jul, 2013 05:21 AM

    Ryan's Avatar

    Check out: http://www.epicwebsites.com/wp-content/uploads/2012/03/fill_sample.html

    Just replace the image with your HTML 5 video and it works perfectly.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

26 Sep, 2014 12:52 PM
25 Sep, 2014 08:36 PM
25 Sep, 2014 11:46 AM
23 Sep, 2014 12:46 PM
22 Sep, 2014 05:51 PM