Advanced Search

Return to Snippet

Revision: 63626
at May 23, 2013 01:13 by rickygri
Initial Code 
// 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)
                });
            }
Initial URL 
http://www.projectsimply.com/examples/fullscreen.html
Initial Description 
Used to stretch a video / image to fill a background without skewing.  Attach to resize events
Initial Title 
Full-screen element (video / image)
Initial Tags 
javascript, video, background, html5
Initial Language 
JavaScript