From: Laury GvR Date: Wed, 14 Mar 2018 18:38:29 +0000 (-0400) Subject: Redoing how the frontpage header videos load X-Git-Tag: v1.0.54^2~1 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=6d8f61974e7c078732b8b1f303933914d6bf8410;p=WP-Themes%2Fpetoskeyarea.git 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 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 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 --- 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 --- 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 --- a/parts/header-video.php +++ b/parts/header-video.php @@ -1,14 +1,30 @@
-
-