Load a smaller frontpage video on mobile view

diff --git a/js/app.js b/js/app.js
index f8df6ab..1848a92 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -313,4 +313,37 @@ $(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( $(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 27ab436..c29956c 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -304,4 +304,37 @@ $(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( $(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 f96a923..1a6aaff 100644 (file)
--- a/parts/header-video.php
+++ b/parts/header-video.php
@@ -1,20 +1,14 @@
 <?php if (is_front_page()) : ?>
-       <div class="front-page-video-container front-page-video-container-mobile show-for-small-only">
-            <video class="front-page-video" playsinline autoplay loop muted>
+    <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>
                 <source src="<?php bloginfo('template_url'); ?>/assets/videos/Header_Video_Mobile_Optimized.mp4" type="video/mp4">
             </video>
         </div>
-       <div class="front-page-video-container front-page-video-container-desktop show-for-medium-up">
-<!--            <video class="front-page-video" playsinline autoplay loop muted>
+       <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>
                 <source src="<?php bloginfo('template_url'); ?>/assets/videos/Header_Video.mp4" type="video/mp4">
-            </video>-->
-
-                <!-- <div class="show-for-medium-down">
-                    <video id="front-page-video-mobile" autoplay="" loop="" muted="" controls="true">
-                        <source src="<?php bloginfo('template_url'); ?>/assets/videos/header.m4v">
-                        <source src="<?php bloginfo('template_url'); ?>/assets/videos/header.mp4">
-                        <p>Your browser does not support HTML5 video.</p>
-                    </video>
-                </div> -->
+            </video>
         </div>
+    </div>
 <?php endif; ?>