starting video when the page is scrolled to it

only playing the footer video if it is in view

diff --git a/front-page.php b/front-page.php
index 289159c..258374c 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -21,7 +21,7 @@
         </div>
         <?php get_template_part('parts/blog-feed-front');?>
         <div id="video">
-        <video id="front-page-video" playsinline autoplay loop controls muted>
+        <video id="front-page-video" playsinline loop controls muted>
             <source src="<?php bloginfo('template_url'); ?>/assets/winter_video.mp4" type="video/mp4">
         </video>
             <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/etv3-mo9Q-Y?rel=0" frameborder="0" allowfullscreen></iframe> -->

diff --git a/js/app.js b/js/app.js
index f730ca2..cbb11c0 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -249,6 +249,7 @@ $(document).ready(function () {
 
         }
     $(window).resize(function(e) {
+        
         windowWidth = $(this).width();
         if (windowWidth < 1025) {
             bigScreen.detach();
@@ -268,5 +269,16 @@ $(document).ready(function () {
         var goToUrl = $(this).children('a').attr("href");
         $(location).attr('href',goToUrl);
     });
-
+    var video = $('#front-page-video');
+    $(window).on("scroll", function(){
+        video.get(0).play();
+    })
+    $.fn.isInViewport = function() {
+        var elementTop = $(this).offset().top;
+        var elementBottom = elementTop + $(this).outerHeight();
+        var viewportTop = $(window).scrollTop();
+        var viewportBottom = viewportTop + $(window).height();
+        return [elementBottom > viewportTop && elementTop < viewportBottom,$(this)];
+    };
+ 
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 40720ec..6adc236 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -46,6 +46,7 @@ $(document).ready(function () {
 
         }
     $(window).resize(function(e) {
+        
         windowWidth = $(this).width();
         if (windowWidth < 1025) {
             bigScreen.detach();
@@ -65,5 +66,16 @@ $(document).ready(function () {
         var goToUrl = $(this).children('a').attr("href");
         $(location).attr('href',goToUrl);
     });
-
+    var video = $('#front-page-video');
+    $(window).on("scroll", function(){
+        video.get(0).play();
+    })
+    $.fn.isInViewport = function() {
+        var elementTop = $(this).offset().top;
+        var elementBottom = elementTop + $(this).outerHeight();
+        var viewportTop = $(window).scrollTop();
+        var viewportBottom = viewportTop + $(window).height();
+        return [elementBottom > viewportTop && elementTop < viewportBottom,$(this)];
+    };
+ 
 });