mobile autoplay fix

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%;">