Advertisement
raselmahmud24

full screen video background //sections video background

Mar 13th, 2015
210
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. jQuery(document).ready(function($) {
  2.  
  3.     $(window).on('resize', scaleVideo);
  4.  
  5.     var vid = document.getElementById("video");
  6.     vid.onloadedmetadata = function() {
  7.         scaleVideo();
  8.     };
  9.     function scaleVideo(){
  10.  
  11.     //GRAVE WINDOW HEIGHT AND WIDTH.
  12.     var windowHeight=$(window).height();//change window height and width to desire container to set identified sections height //and width.
  13.     var windowWidth=$(window).width();
  14.  
  15.     //GET VIDEO WIDTH AND HEIGHT;
  16.     var videoNativHeight=$('.bg_video')[0].videoHeight;
  17.     var videoNativeWidth=$('.bg_video')[0].videoWidth;
  18.  
  19.     // SCALE FACTORS
  20.     var heightScaleFactor=windowHeight / videoNativHeight;
  21.     var widthScaleFactor=windowWidth / videoNativeWidth;
  22.  
  23.     // GET THIS HIGHEST SCALE FACTOR
  24.     if(widthScaleFactor>heightScaleFactor){
  25.         var scale=widthScaleFactor;
  26.     }else{
  27.         var scale=heightScaleFactor;
  28.     }
  29.  
  30.     var scaledVideoHeight=videoNativHeight * scale;
  31.     var scaledVideoWIdth=videoNativeWidth * scale;
  32.     $('#video').height(scaledVideoHeight);
  33.     $('#video').width(scaledVideoWIdth);
  34.  
  35.     };
  36.         var $video = $('#video');
  37.         $video.on('canplaythrough', function() {
  38.            this.play();
  39.         });
  40. });
  41.  
  42. autoplay solution
  43.  
  44. http://pastebin.com/5S9VW1k2
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement