Forcing the header video to play to attempt to make it work on Safari/Android

diff --git a/front-page.php b/front-page.php
index e4aaebd..2e5376a 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -6,12 +6,12 @@
 <main class="page-front">
     <div id="content-wrapper">
         <div class="show-for-medium-up">
-            <video autoplay="" loop="" muted="">
+            <video id="headerVideo" autoplay="" loop="" muted="">
                 <source src="<?php bloginfo('template_url'); ?>/assets/Header_Video.mp4">
             </video>
         </div>
         <div class="show-for-small-down">
-            <video autoplay="" loop="" muted="">
+            <video id="headerVideoMobile" autoplay="" loop="" muted="">
                 <source src="<?php bloginfo('template_url'); ?>/assets/Header_Video_Mobile.mp4">
             </video>
         </div>

diff --git a/js/app.js b/js/app.js
index 1f8fa84..72057b9 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -60,4 +60,8 @@ $(document).ready(function () {
         }
 
     });
+    var headerVideo = document.getElementById('headerVideo');
+    var headerVideoMobile = document.getElementById('headerVideoMobile');
+    headerVideo.play();
+    headerVideoMobile.play();
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index c159f16..843b2ed 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -51,4 +51,8 @@ $(document).ready(function () {
         }
 
     });
+    var headerVideo = document.getElementById('headerVideo');
+    var headerVideoMobile = document.getElementById('headerVideoMobile');
+    headerVideo.play();
+    headerVideoMobile.play();
 });

diff --git a/page.php b/page.php
index 3bef5c6..7bf5136 100644 (file)
--- a/page.php
+++ b/page.php
@@ -3,12 +3,12 @@
     <div id="head-img">
         <?php if ( is_page('real-estate') ) { ?>
                 <div class="show-for-medium-up">
-                    <video autoplay="" loop="" muted="">
+                    <video id="headerVideo" autoplay="" loop="" muted="">
                         <source src="<?php bloginfo('template_url'); ?>/assets/Real_Estate_Video.mp4">
                     </video>
                 </div>
                 <div class="show-for-small-down">
-                    <video autoplay="" loop="" muted="">
+                    <video id="headerVideoMobile" autoplay="" loop="" muted="">
                         <source src="<?php bloginfo('template_url'); ?>/assets/Real_Estate_Video_Mobile.mp4">
                     </video>
                 </div>