work around browser playback restrictions

content/templates/base.html

@@ -9,7 +9,7 @@
     <title>CAMP</title>
     {% endblock %}
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
-    <link rel="stylesheet" type="text/css" href="{% static "css/foundation.css" %}"> 
+    <link rel="stylesheet" type="text/css" href="{% static "css/foundation.css" %}?20250201">
     <link rel="stylesheet" type="text/css" href="{% static "css/jquery.bxslider.css" %}">
     <link rel="stylesheet" type="text/css" href="{% static "css/main.css" %}"> 
     <link rel="stylesheet" type="text/css" href="{% static "css/app.css" %}"> 
@@ -117,6 +117,42 @@
          });
       }
       $(document).ready(loadSlideshow);
+      var restrictedElements = [];
+      function removeBehaviorsRestrictions(event) {
+        if (restrictedElements.length > 0) {
+            var rElements = restrictedElements;
+            restrictedElements = [];
+            rElements.forEach(function(video) {
+                if (video.autoplay && video.paused) {
+                        video.load()
+                        video.play()
+                        if (video.paused) {
+                            restrictedElements.push(video)
+                        }
+                } else if (video.readyState < 4) {
+                    video.load()
+                }
+            });
+        }
+      }
+
+      if (document.querySelector('video')) {
+        let video = document.createElement('video');
+        video.muted = true
+        video.play();
+        if (video.paused) {
+            restrictedElements = document.querySelectorAll('video.gif')
+            window.addEventListener('keydown', removeBehaviorsRestrictions);
+            window.addEventListener('mousedown', removeBehaviorsRestrictions);
+            window.addEventListener('touchstart', removeBehaviorsRestrictions);
+            restrictedElements.forEach(video => {
+                if (!video.poster) {
+                    video.poster = video.src.replace('.mp4', '.jpg')
+                    video.muted = true
+                }
+            })
+        }
+      }
     </script>
   {% block end %}
   {% endblock %}