title: HTML5 Video as web page background fade in
body: <p>I currently have a loop as my web page background and was wondering if the video loop can fade in <em>and</em> also <em>not repeat the fade in</em> but just play the loop? The loop is the full background using a HTML5 video background jquery script and I was wanting it to first fade in and then just continue the loop.</p>
  
  <p>Thanks for the help!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
      $(document).ready(function() { 
          $("body").videoBG({ 
              mp4:"SiteBackgroundVideos/SiteBackgroundVideo.mp4",
              ogg:"SiteBackgroundVideos/SiteBackgroundVideo.ogv",
              webm:"SiteBackgroundVideos/SiteBackgroundVideo.webm", videoVolume:0.8,
              pattern:"images/pattern.png", patternOpacity:0.8 
          });
      });  
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>The only thing that I see with <strong>videoBG</strong> is the jquery.video-background.js file:</p>
  
  <pre><code>;(function($) {
  $.fn.videoBG = function(settings) {
  
      //Default Variables
      var defaults = {
          autoplay:true,
          loop:true,
          //Video volume between 0 - 1
          videoVolume:1,
          //Aspect ratio
          aspectRatio:3,      //0:Normal, 1:Aspect, 2:Full, 3:Scale
          //Video Type
          mp4:false,
          webm:false,
          flv:false,
          ogg:false,
          //Mobile Video Type
          mp4Mobile:false,
          webmMobile:false,
          flvMobile:false,
          oggMobile:false,
          //Pattern
          pattern:"",
          patternOpacity:1,
          //Go to URL on video ended - You must set "loop:false" on top to run video ended event handler
          videoEndURL:""
      };
  
      //Settings
      var settings = $.extend({}, defaults, settings);        
  
      //HTML5
      var isHTML5 = false;
  
      //Mobile
      var isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) ? true : false;
      var videoAutoPlay = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) ? false : true;
  
      //Mobile Videos
      if (settings.mp4 &amp;&amp; !settings.mp4Mobile) {settings.mp4Mobile = settings.mp4;}
      if (settings.webm &amp;&amp; !settings.webmMobile) {settings.webmMobile = settings.webm;}
      if (settings.flv &amp;&amp; !settings.flvMobile) {settings.flvMobile = settings.flv;}
      if (settings.ogg &amp;&amp; !settings.oggMobile) {settings.oggMobile = settings.ogg;}
  
      //Variables
      var win = $(window);
      var winW, winH;     
      var container = $(this);
      var video, objVideo;
      var videoW=0, videoH=0;
      var videoMask = $('&lt;div class="video-bg-mask" /&gt;');
      var videoHolder = $('&lt;div class="video-bg-holder" id="video-bg-holder" /&gt;');
      var videoPattern = $('&lt;div class="video-pattern" /&gt;');
      var videoPreloader = $('&lt;div class="video-preloader" /&gt;');
      var hidden = false;
  
      //Video Mask
      container.append(videoMask);
  
      //Video Holder
      videoMask.append(videoHolder);  
  
      //Window resize handler
      win.resize(resizeVideo);    
  
      if (Modernizr.video &amp;&amp; (settings.mp4 || settings.webm || settings.ogg)) {           
          //HTML5 Video
          createHTML5();
      } else {
          //Flash
          var playerVersion = swfobject.getFlashPlayerVersion();
          if(playerVersion.major&gt;9) {
              createFlash();
          }
      }
  
      //Create HTML5 video tag
      function createHTML5() {
          var src = "", type = "", error = false;
          //Video type
          if (Modernizr.video.h264 &amp;&amp; settings.mp4) {
              src = !isMobile ? settings.mp4 : settings.mp4Mobile; 
              type = "video/mp4";
          } else if (Modernizr.video.ogg &amp;&amp; settings.ogg) {
              src = !isMobile ? settings.ogg : settings.oggMobile; 
              type = "video/ogg";
          } else if (Modernizr.video.webm &amp;&amp; settings.webm) {
              src = !isMobile ? settings.webm : settings.webmMobile; 
              type = "video/webm";
          } else {
              error = true;   
          }
          //Preloader
          videoMask.append(videoPreloader);
          //Video tag
          if (!error) {
              var attr =' preload="'+(isMobile ? "auto" : "metadata")+'"';
              if (settings.autoplay) {
                  attr += ' autoplay="autoplay"';
              }   
              if (settings.loop) {
                  attr += ' loop="loop"';
              }               
              var videoCode = '&lt;video class="video-container" \
                                  width="100%" height="100%" \
                                  src="'+src+'" type="'+type+'\
                                  "'+attr+'\
                               /&gt;';
              videoHolder.html(videoCode);
              objVideo = videoHolder.find(".video-container");
              video = objVideo[0];
              video.addEventListener("ended", videoEnded, false);
              video.addEventListener("loadedmetadata", videoMetadata, false);
              video.addEventListener("waiting", videoWaiting);
              video.addEventListener("playing", videoPlaying);
              video.load();
              isHTML5 = true;
          }           
      }
  
      //Video meta data
      function videoMetadata(e) {
          video.removeEventListener("loadedmetadata", videoMetadata, false);
          //Video dimensions
          videoW = video.videoWidth;
          videoH = video.videoHeight;
          //Pattern
          if (settings.pattern!="") {
              createPattern();
          }
          //Resize video
          resizeVideo();
          //Show video holder
          videoHolder.stop().animate({"opacity":1}, 500);
          //Set video volume
          video.volume = settings.videoVolume;
          if(!videoAutoPlay){
              video.play();
          }
      }
  
      //Video ended
      function videoEnded(e) {
          //Redirect to URL
          if (settings.videoEndURL!="") {
              goToUrl();
          }
      }
  
      //Video waiting
      function videoWaiting(e) {
          videoPreloader.fadeIn();
      }
  
      //Video playing
      function videoPlaying(e) {
          videoPreloader.fadeOut();
      }
  
      //Pattern
      function createPattern() {
          videoPattern.css({"background-image":"url("+settings.pattern+")", "opacity":settings.patternOpacity});
          videoMask.append(videoPattern);
      }
  
      //Create Flash video player
      function createFlash() {
          var src = "", error = false;
          if (settings.mp4) {
              src = !isMobile ? settings.mp4 : settings.mp4Mobile;                
          } else if (settings.flv) {
              src = !isMobile ? settings.flv : settings.flvMobile;                
          } else {
              error = true;   
          }           
          if (!error) {
              //Resize video
              resizeVideo();
              //Create video SWF
              var flashvars = {
                  videoUrl:"../"+src,
                  fullSizeView:(settings.aspectRatio+1),
                  defaultVolume:settings.videoVolume,
                  pattern:settings.pattern,
                  patternAlpha:settings.patternOpacity,
                  loop:settings.loop,
                  videoEndURL:settings.videoEndURL                
              };
              var params = {
                  scale:"noscale",
                  allowFullScreen:"true",
                  menu:"false",
                  bgcolor:"#000000",
                  wmode:"transparent"
              };
              var attributes = {
                  name: "video-bg-swf"
              };
              swfobject.embedSWF("flash/videobg.swf", "video-bg-holder", "100%", "100%", "9", null, flashvars, params, attributes, callbackFlash);
              //Show video holder
              videoHolder.stop().animate({"opacity":1}, 500);
          }
      }
  
      //Call back Flash
      function callbackFlash(e) {
          video = document.getElementById(e.id);
      }
  
      //Go to URL
      function goToUrl(){
          window.location = settings.videoEndURL;
      }
  
      //Resize video
      function resizeVideo(e) {
          winW = win.width();
          winH = win.height();
          var xScale = winW/videoW,
          yScale = winH/videoH, 
          scale=1, w=0, h=0, x=0, y=0;
          switch (settings.aspectRatio) {
              case 0: //Normal
                  if (winW&lt;videoW || winH&lt;videoH) {
                      scale = Math.min(xScale, yScale);                       
                  }                   
                  w = Math.ceil(videoW*scale);
                  h = Math.ceil(videoH*scale);                    
                  x = Math.ceil((winW-w)/2);
                  y = Math.ceil((winH-h)/2);
                  break;  
              case 1: //Aspect
                  scale = Math.min(xScale, yScale);
                  w = Math.ceil(videoW*scale);
                  h = Math.ceil(videoH*scale);
                  x = Math.ceil((winW-w)/2);
                  y = Math.ceil((winH-h)/2);      
                  break;
              case 2: //Full
                  w = winW;
                  h = winH;
                  x = 0;
                  y = 0;      
                  break;
              case 3: //Scale
              default:
                  scale = Math.max(xScale, yScale);
                  w = Math.ceil(videoW*scale);
                  h = Math.ceil(videoH*scale);
                  x = Math.ceil((winW-w)/2);
                  y = Math.ceil((winH-h)/2);  
                  break;
          }
          if (isHTML5) {
              objVideo.css({"width":w+"px", "height":h+"px"});
              videoHolder.css({"left":x+"px", "top":y+"px"});
              if (settings.pattern!="") {
                  videoPattern.css({"left":x+"px", "top":y+"px", "width":w+"px", "height":h+"px"});   
              }
          } else {
              videoHolder.css({"width":winW+"px", "height":winH+"px"});
          }           
      }
  
      /***
      JS call back functions
      ***/
      //Play - Pause
      function isPlaying() {
          if(isHTML5) {
              return !video.paused;
          } else {
              return video.isPlaying();
          }
      }
  
      videoBg_play = function() {
          if(isHTML5) {
              video.play();
          } else {
              video.resume();
          }
      };
  
      videoBg_pause = function() {
          video.pause();
      };
  
      videoBg_toggle_play = function() {
          if(isPlaying()) {
              videoBg_pause();
          } else {
              videoBg_play();
          }
      };  
  
      //Rewind
      videoBg_rewind = function() {
          if(isHTML5) {
              video.currentTime = 0;
          } else {
              video.rewind();
          }
      };
  
      //Mute - Unmute
      function isMuted() {
          if(isHTML5) {
              return !(video.volume);
          } else {
              return video.isMute();
  
          }
      }
  
      videoBg_mute = function(){
          if(isHTML5) {
              video.volume = 0;
          } else {
              video.mute();
          }
      };
  
      videoBg_unmute = function(){
          if(isHTML5) {
              video.volume = settings.videoVolume;
          } else {
              video.unmute();
          }
      };
  
      videoBg_toggle_sound = function(){
          if(isMuted()) {
              videoBg_unmute();
          } else {
              videoBg_mute();
          }
      };
  
      //Show - Hide
      videoBg_show = function(){
          videoBg_play();
          videoMask.stop().fadeTo(600, 1);
          hidden = false;
      };
  
      videoBg_hide = function(){
          videoBg_pause();
          videoMask.stop().fadeTo(600, 0);
          hidden = true;
      };      
  
      videoBg_toggle_hide = function(){
          if(hidden) {
              videoBg_show();
          } else {
              videoBg_hide();
          }
      };
  
  };
  
  })(jQuery);
  </code></pre>