Redoing how the frontpage header videos load

In short: custom pre-load image is shown while the video loads, and
the only video loaded is the one appropriate for the window size on
load

Previously, both Desktop and Mobile videos would load for this site,
and only one would be shown, resulting in slowed load times.

The first method tried was switching out the source based on the
window width; this required a single video container as opposed to
two, and it worked fine, with the exception of the container not
technically having any 'content' on load, leading to disruptively
jumping content without a fallback or poster image in place.

Since we do not have a fallback image, I created a simple one that
says the video is loading.

After discussing this problem with Anthony, we decided to go with
a method that still uses two different containers, but uses
preload="none" to avoid the video loading, and then .load() to load
the actual video if the window size is right. The only problem
remaining was that now both elements would show without a class
like show-for-medium-down, but with those classes, when someone
resizes from large to small no video is shown at all.

However, since the possibility of problems is relatively small
(only when going from tablet portrait to landscape, and from
opening the site in a small window and resizing it to be large),
this too is something we will at this point not be spending time
to resolve.

Some attempt was made at creating some code that handles source
loading based on window resize, but this has been abandoned on
account of window resizing not being our concern (and to save time)

diff --git a/assets/videos/header-video-preload-image-v2.png b/assets/videos/header-video-preload-image-v2.png
new file mode 100644 (file)
index 0000000..bedfcf8
Binary files /dev/null and b/assets/videos/header-video-preload-image-v2.png differ

diff --git a/assets/videos/header-video-preload-image.png b/assets/videos/header-video-preload-image.png
new file mode 100644 (file)
index 0000000..492e523
Binary files /dev/null and b/assets/videos/header-video-preload-image.png differ

diff --git a/js/app.js b/js/app.js
index 2472564..9c76736 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -301,7 +301,7 @@ $(document).ready(function () {
        });
     }
     $("#1536").find("a").attr("href", "http://blog.petoskeyarea.com").attr("target", "_blank");
-
+   
     var communities_offcanvas = page.find( $(".communities-offcanvas") );
     var home_link             = page.find( $(".home-link") );
     var contact_us            = page.find( $(".contact-us") );
@@ -313,39 +313,6 @@ $(document).ready(function () {
     groups.insertAfter(contact_us);
     media.insertAfter(groups);
     privacy.insertAfter(media);
-    
-    var video_wrapper           = document.getElementById( "front-page-video-wrapper" );
-    var video_container_mobile  = document.getElementById( "front-page-video-container-mobile" );
-    var video_container_desktop = document.getElementById( "front-page-video-container-desktop" );
-    var video_mobile            = document.getElementById( "front-page-video-container-mobile-video" );
-    var video_desktop           = document.getElementById( "front-page-video-container-desktop-video" );
-    if ( $("#front-page-video-container-desktop").length > 0 || $("#front-page-video-container-mobile").length > 0 ) { 
-        if( $(window).width() >= 640){
-            video_wrapper.removeChild(video_container_mobile);
-        } else {
-            video_wrapper.removeChild(video_container_desktop);
-        }
-        $( window ).resize(function() {
-            if( $(window).width() >= 640){
-                if ( !document.getElementById( "front-page-video-container-desktop" )) {
-                    video_wrapper.appendChild(video_container_desktop);
-                    video_wrapper.removeChild(video_container_mobile);
-                    video_desktop = document.getElementById( "front-page-video-container-desktop-video" );
-                    video_desktop.autoplay = true;
-                    video_desktop.load();
-                    video_desktop.play();
-                }
-            } else {
-                if ( !document.getElementById( "front-page-video-container-mobile" )) {
-                    video_wrapper.appendChild(video_container_mobile);
-                    video_wrapper.removeChild(video_container_desktop);
-                    video_mobile = document.getElementById( "front-page-video-container-mobile-video" );
-                    video_mobile.autoplay = true;
-                    video_mobile.load();
-                    video_mobile.play();
-                }
-            }
-        });
-    }
+
     
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index c1b8c8b..454cb1e 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -292,7 +292,7 @@ $(document).ready(function () {
        });
     }
     $("#1536").find("a").attr("href", "http://blog.petoskeyarea.com").attr("target", "_blank");
-
+   
     var communities_offcanvas = page.find( $(".communities-offcanvas") );
     var home_link             = page.find( $(".home-link") );
     var contact_us            = page.find( $(".contact-us") );
@@ -304,39 +304,6 @@ $(document).ready(function () {
     groups.insertAfter(contact_us);
     media.insertAfter(groups);
     privacy.insertAfter(media);
-    
-    var video_wrapper           = document.getElementById( "front-page-video-wrapper" );
-    var video_container_mobile  = document.getElementById( "front-page-video-container-mobile" );
-    var video_container_desktop = document.getElementById( "front-page-video-container-desktop" );
-    var video_mobile            = document.getElementById( "front-page-video-container-mobile-video" );
-    var video_desktop           = document.getElementById( "front-page-video-container-desktop-video" );
-    if ( $("#front-page-video-container-desktop").length > 0 || $("#front-page-video-container-mobile").length > 0 ) { 
-        if( $(window).width() >= 640){
-            video_wrapper.removeChild(video_container_mobile);
-        } else {
-            video_wrapper.removeChild(video_container_desktop);
-        }
-        $( window ).resize(function() {
-            if( $(window).width() >= 640){
-                if ( !document.getElementById( "front-page-video-container-desktop" )) {
-                    video_wrapper.appendChild(video_container_desktop);
-                    video_wrapper.removeChild(video_container_mobile);
-                    video_desktop = document.getElementById( "front-page-video-container-desktop-video" );
-                    video_desktop.autoplay = true;
-                    video_desktop.load();
-                    video_desktop.play();
-                }
-            } else {
-                if ( !document.getElementById( "front-page-video-container-mobile" )) {
-                    video_wrapper.appendChild(video_container_mobile);
-                    video_wrapper.removeChild(video_container_desktop);
-                    video_mobile = document.getElementById( "front-page-video-container-mobile-video" );
-                    video_mobile.autoplay = true;
-                    video_mobile.load();
-                    video_mobile.play();
-                }
-            }
-        });
-    }
+
     
 });

diff --git a/parts/header-video.php b/parts/header-video.php
index 1a6aaff..424df19 100644 (file)
--- a/parts/header-video.php
+++ b/parts/header-video.php
@@ -1,14 +1,30 @@
 <?php if (is_front_page()) : ?>
     <div id="front-page-video-wrapper">
-       <div id="front-page-video-container-mobile" class="front-page-video-container">
-            <video id="front-page-video-container-mobile-video" class="front-page-video" playsinline autoplay loop muted>
+       <div id="front-page-video-container-mobile" class="front-page-video-container show-for-medium-down">
+            <img src="<?php bloginfo('template_url');?>/assets/videos/header-video-preload-image-v2.png">
+            <video style="position:absolute;top:189px;left:0;" id="front-page-video-container-mobile-video" class="front-page-video" playsinline loop muted preload="none" width="100%" poster="<?php bloginfo('template_url'); ?>/assets/videos/header-video-preload-image-v2.png">
                 <source src="<?php bloginfo('template_url'); ?>/assets/videos/Header_Video_Mobile_Optimized.mp4" type="video/mp4">
             </video>
         </div>
-       <div id="front-page-video-container-desktop" class="front-page-video-container">
-            <video id="front-page-video-container-desktop-video" class="front-page-video" playsinline autoplay loop muted>
+       <div id="front-page-video-container-desktop" class="front-page-video-container show-for-large-up">
+            <img src="<?php bloginfo('template_url');?>/assets/videos/header-video-preload-image-v2.png">
+            <video style="position: absolute;top:219px;left:0;" id="front-page-video-container-desktop-video" class="front-page-video" playsinline loop muted preload="none" width="100%" poster="<?php bloginfo('template_url'); ?>/assets/videos/header-video-preload-image-v2.png">
                 <source src="<?php bloginfo('template_url'); ?>/assets/videos/Header_Video.mp4" type="video/mp4">
             </video>
         </div>
     </div>
 <?php endif; ?>
+
+<script type='text/javascript'>
+
+        jQuery(window).on("load", function(){
+            if( $(window).width() < 1025) {
+                jQuery("#front-page-video-container-mobile-video")[0].play();
+            } else{
+                jQuery("#front-page-video-container-desktop-video")[0].play();
+            }
+        });
+
+
+</script>
+