resize on window size change

[sydlawrence]

resize on window size change

[davidklaw]

I've made this change for a project I'm working on. Once everything is complete I'll submit it.

[davidklaw]

I'd feel lame actually contributing this minor change but it seems to me like the only thing you need to do is utilize your existing width/height options and pass in '100%'. I'd set the width to 100% to keep distortion from occurring but then you get the occasional empty space below the video depending on your window dimensions.

[negatron]

Did anyone get anywhere on this?

@davidklaw - Did you figure out a way of resizing without the white space?

Any help here would be wonderful. Thank you.

[davidklaw]

@negatron Did you try providing a width or height of 100% as an option? I think that no matter what there are situations where the browser size is such that there will be space.

With width=100%...
A very tall narrow window will have whitespace below it. A very wide window will probably cut off a lot of the video.

With height=100%
A very tall narrow window will cut off the video horizontally. A very wide window will have whitespace to the side.

If you truly want it to ALWAYS fill the window then you're going to have a distorted video.

[negatron]

@davidklaw Thanks for getting back so quickly David...

Yes I did try the 100% route and finally settled with !00% on the width and the height applying it here:

        var $div = $('<div/>');
        $div.addClass('videoBG')
            .css('position',options.position)
            .css('z-index',options.zIndex)
            .css('top',0)
            .css('left',0)
            .css('height','100%') //<------Here and,
            .css('width','100%') //<-------here
            .css('opacity',options.opacity)
            .css('overflow','hidden');

Remarkably, it doesn't seem to stretch the video at all. Rather, if you load it up really small and then drag to make either tall and thin or wide and narrow, the video resizes to fit the largest dimension and crops on the smaller one. Not exactly sure why this is so - I thought it would behave as you said - but it is!

You can see it working here: http://dk8.co/testbed/video/

Thanks so much for the initial advice.

[davidklaw]

@negatron You're welcome. Correct in that the video doesn't get stretched but the cropping is something I couldn't have for my project. In the case of falling snow cropping doesn't affect much but if you have a video where say the lower portion of the video is the social point you'll have a problem.

Good luck with whatever you're working on dude!

[davidlevy247]

Honestly Stretching is okay, for example look at bigvideo.js.. now that one is a super pain because it's not as friendly to use on any div (which is why I'm trying yours out) but it allows fluid resizing disregarding distortion. It's a background image in motion.. and considering most modern designs need to be responsive and fluid, allowing distortion so there's no gaps in the background fill is ideal. Honestly an unlock aspect ratio option should truly be in the scripts parameters.

[schikulski]

.videoBG,
.videoBG_wrapper {
   width: 100% !important;
   height: 100% !important;
}

Did the trick for me