Posted By

rickygri on 05/23/13


Tagged

javascript video background html5 full-screen


Versions (?)

Full-screen element (video / image)


 / Published in: JavaScript
 

URL: http://www.projectsimply.com/examples/fullscreen.html

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

  1. // HTML elem object
  2. video = base.el;
  3. // JQ object
  4. elem = $("#"+base.el.id);
  5.  
  6. var wheight = 0;
  7. var wwidth = 0;
  8. var ratio = 0;
  9.  
  10. wheight = $(window).height();
  11. wwidth = $(window).width();
  12.  
  13. elem.width(wwidth).height(wheight);
  14. ratio = video.videoWidth / video.videoHeight;
  15.  
  16. if(wwidth/ratio >= wheight) {
  17. // If the browser is wider than the image
  18. elem.css({
  19. 'width' : wwidth,
  20. 'height' : Math.ceil(wwidth/ratio),
  21. 'margin-top' : Math.ceil((wheight - wwidth/ratio)/2)
  22. });
  23. } else {
  24. elem.css({
  25. 'height' : wheight,
  26. 'width' : Math.ceil(wheight*ratio),
  27. 'margin-left' : Math.ceil((wwidth - wheight*ratio)/2)
  28. });
  29. }

Report this snippet  

You need to login to post a comment.