From 06f4cf146fa47be43611b9c67c5e87f6843ebc32 Mon Sep 17 00:00:00 2001
From: Theodore Zhao <theodorezhao@microsoft.com>
Date: Wed, 22 May 2024 19:04:28 +0000
Subject: [PATCH] mobile autoplay fix

---
 index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 35fba01..0238164 100644
--- a/index.html
+++ b/index.html
@@ -268,20 +268,24 @@ <h1 style="font-size: 2em;">Everything</h1>
 }
 </style> 
 
-<!-- JavaScript for ensuring autoplay on mobile devices -->
+<!-- JavaScript for ensuring autoplay on mobile devices after user interaction -->
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
+  function enableAutoplay() {
     var videos = document.querySelectorAll('video[autoplay]');
     videos.forEach(function(video) {
       video.play().catch(function(error) {
         console.log('Autoplay was prevented: ', error);
       });
     });
-  });
+  }
+
+  document.body.addEventListener('touchstart', enableAutoplay, {once: true});
+  document.body.addEventListener('click', enableAutoplay, {once: true});
 </script>
 
 
 
+
 <section class="section columns_video" id="detection" style="display: flex; justify-content: space-between;align-items: center; margin:5%;">
   <!-- left be caption and right be video -->
   <div class="text-section col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6" style="padding: 5%;">