diff --git a/public/img/scene.webm b/public/img/scene.webm new file mode 100644 index 0000000000000000000000000000000000000000..898ebdc8c0f2012d225f4764fcbc6518e8205483 Binary files /dev/null and b/public/img/scene.webm differ diff --git a/public/index.html b/public/index.html index a61803d0133b4b844d08df576f16cee5ce299d4d..c620bb05898e9213d3e3de12b83871996137a91e 100644 --- a/public/index.html +++ b/public/index.html @@ -117,6 +117,18 @@ </div> </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"> @@ -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;