Posted By

rickygri on 05/23/13

Tagged

Versions (?)

Last Edited at 05/23/13 01:13am

Statistics

Viewed 764 times

Favorited by 0 user(s)

Related snippets

Full-screen element (video / image)

/ Published in: JavaScript

Used to stretch a video / image to fill a background without skewing. Attach to resize events

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

// HTML elem object
            video = base.el;
            // JQ object
            elem = $("#"+base.el.id);
 
            var wheight = 0;
            var wwidth = 0;
            var ratio = 0;
 
            wheight = $(window).height();
            wwidth = $(window).width();
 
            elem.width(wwidth).height(wheight);
            ratio = video.videoWidth / video.videoHeight;
 
            if(wwidth/ratio >= wheight) {
                // If the browser is wider than the image
                elem.css({
                    'width' : wwidth,
                    'height' : Math.ceil(wwidth/ratio),
                    'margin-top' : Math.ceil((wheight - wwidth/ratio)/2)
                });
            } else {
                elem.css({
                    'height' : wheight,
                    'width' : Math.ceil(wheight*ratio),
                    'margin-left' : Math.ceil((wwidth - wheight*ratio)/2)
                });
            }