add moving scene

public/index.html

@@ -118,6 +118,18 @@
     </div>
   </section>
 
+  <section id="scene">
+    <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <div class="embed-responsive embed-responsive-16by9 border rounded mb-5">
+            <video src="img/scene.webm" type="video/webm" class="img-fluid force-autoplay" playsinline autoplay loop onclick="this.play()"></video>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
   <section id="gallery" class="tm-section-pad-top">
     <div class="container tm-container-gallery">
       <div class="row">
@@ -161,14 +173,6 @@
                   </figcaption>
                 </figure>
               </a>
-              <a href="img/sheep.png">
-                <figure class="effect-honey tm-gallery-item">
-                  <img src="img/sheep-crop.png" alt="Image" class="img-fluid">
-                  <figcaption>
-                    <h2><i>Ist das ein Konsens-Schaf?</i></h2>
-                  </figcaption>
-                </figure>
-              </a>
               <a href="img/bike.png">
                 <figure class="effect-honey tm-gallery-item">
                   <img src="img/bike-crop.png" alt="Image" class="img-fluid">
@@ -268,6 +272,25 @@
   <script src="js/jquery.singlePageNav.min.js"></script>     
   <script src="js/bootstrap.min.js"></script> 
   <script>
+    let autoplay_forced = false;
+
+    function force_autoplay() {
+      if (!autoplay_forced) {
+        autoplay_forced = true;
+
+        document.querySelectorAll('video.force-autoplay').forEach(e => {
+          e.addEventListener('loadeddata', () => {
+            e.play();
+          });
+          e.play();
+        });
+      }
+    }
+
+    document.addEventListener('click', () => {
+      force_autoplay();
+    });
+
     
     function getOffSet(){
       var _offset = 450;