title: Drupal Responsive HTML5 Video Background in DIV Modernizr
body: <p>I am trying to implement <a href="http://jsfiddle.net/mgmilcher/8R7Xx/sho/" rel="nofollow">http://jsfiddle.net/mgmilcher/8R7Xx/sho/</a> Responsive HTML5 Video Background in my Drupal Site Homepage but have been unsuccessful. By copying all the html code over locally to my page--front.tpl.php page, the video and text appears, but obviously not how I would like. Once I add the CSS to my style.css sheet, everything disappears. I have added the JS locally to the site and currently have it in the "theme.info" file with scripts [] = 'name.js'. Unfortunately this doesn't seem to have have any effect on the outcome. My theme is based on bootstrap which is the same this example has been created with. </p>
  
  <p>Has anyone implemented this example into their Drupal site successfully? I would like a a responsive background video for only the main content where I can add other content - Text, over the video, and need to be able to have scroll capability to view content below viewport.</p>
  
  <pre><code>&lt;div class="homepage-hero-module"&gt;
      &lt;div class="video-container"&gt;
          &lt;div class="title-container"&gt;
              &lt;div class="headline"&gt;
                      &lt;h1&gt;Welcome to our Company&lt;/h1&gt;
  
              &lt;/div&gt;
              &lt;div class="description"&gt;
                  &lt;div class="inner"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="filter"&gt;&lt;/div&gt;
          &lt;video autoplay loop class="fillWidth"&gt;
              &lt;source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" /&gt;Your browser does not support the video tag. I suggest you upgrade your browser.&lt;/video&gt;
          &lt;div class="poster hidden"&gt;
              &lt;img src="http://www.videojs.com/img/poster.jpg" alt=""&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
  }
  .no-video .video-container video,
  .touch .video-container video {
    display: none;
  }
  .no-video .video-container .poster,
  .touch .video-container .poster {
    display: block !important;
  }
  .video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
  }
  .video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
  }
  .video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
  }
  .video-container .title-container {
    z-index: 1000;
    position: absolute;
    top: 35%;
    width: 100%;
    text-align: center;
    color: #fff;
  }
  .video-container .description .inner {
    font-size: 1em;
    width: 45%;
    margin: 0 auto;
  }
  .video-container .link {
    position: absolute;
    bottom: 3em;
    width: 100%;
    text-align: center;
    z-index: 1001;
    font-size: 2em;
    color: #fff;
  }
  .video-container .link a {
    color: #fff;
  }
  .video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
  }
  .video-container video.fillWidth {
    width: 100%;
  }
  </code></pre>
  
  <p>The JS</p>
  
  <pre><code>/** Document Ready Functions **/
  /********************************************************************/
  
  $( document ).ready(function() {
  
      // Resive video
      scaleVideoContainer();
  
      initBannerVideoSize('.video-container .poster img');
      initBannerVideoSize('.video-container .filter');
      initBannerVideoSize('.video-container video');
  
      $(window).on('resize', function() {
          scaleVideoContainer();
          scaleBannerVideoSize('.video-container .poster img');
          scaleBannerVideoSize('.video-container .filter');
          scaleBannerVideoSize('.video-container video');
      });
  
  });
  
  /** Reusable Functions **/
  /********************************************************************/
  
  function scaleVideoContainer() {
  
      var height = $(window).height();
      var unitHeight = parseInt(height) + 'px';
      $('.homepage-hero-module').css('height',unitHeight);
  
  }
  
  function initBannerVideoSize(element){
  
      $(element).each(function(){
          $(this).data('height', $(this).height());
          $(this).data('width', $(this).width());
      });
  
      scaleBannerVideoSize(element);
  
  }
  
  function scaleBannerVideoSize(element){
  
      var windowWidth = $(window).width(),
          windowHeight = $(window).height(),
          videoWidth,
          videoHeight;
  
      console.log(windowHeight);
  
      $(element).each(function(){
          var videoAspectRatio = $(this).data('height')/$(this).data('width'),
              windowAspectRatio = windowHeight/windowWidth;
  
          if (videoAspectRatio &gt; windowAspectRatio) {
              videoWidth = windowWidth;
              videoHeight = videoWidth * videoAspectRatio;
              $(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
          } else {
              videoHeight = windowHeight;
              videoWidth = videoHeight / videoAspectRatio;
              $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
          }
  
          $(this).width(videoWidth).height(videoHeight);
  
          $('.homepage-hero-module .video-container video').addClass('fadeIn animated');
  
  
      });
  }
  </code></pre>
  
  <p>I have installed the modernize module and also included the modernizr.min.js in my sites/all/libraries/modernizr folder</p>