From ab90184ec53e44c24eaa77bb187730584ecb77d7 Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Thu, 8 Jul 2021 09:56:16 +0200
Subject: [PATCH] jumbotron video with different codecs

---
 README.md                       | 5 ++++-
 layouts/partials/jumbotron.html | 7 +++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 28c245f..1ff762a 100644
--- a/README.md
+++ b/README.md
@@ -206,7 +206,10 @@ subtitle: Some fancy subtitle
 image: /jumbotron_image.svg
 imagePosition: left  # values: left, right, top, bottom
 background: /img/jumbotron_bg.png
-backgroundVideo: /jumbotron_video.webm  # will replace the background image
+backgroundVideo: /jumbotron_video.mp4  # will replace the background image
+# it's best to provide both an mp4 and a web source for the video for better compatibility
+backgroundVideoMp4: /jumbotron_video.mp4
+backgroundVideoWebm: /jumbotron_video.webm
 videoOpacity: 1.0
 textShadow: false
 fullscreen: false
diff --git a/layouts/partials/jumbotron.html b/layouts/partials/jumbotron.html
index a61f9a1..bcbd611 100644
--- a/layouts/partials/jumbotron.html
+++ b/layouts/partials/jumbotron.html
@@ -11,7 +11,14 @@
                 class="jumbotron_video"
                 id="jumbotron_video"
                 src="{{ .Site.Data.jumbotron.backgroundVideo }}"
+                playsinline
                 autoplay mute loop>
+                    {{ if .Site.Data.jumbotron.backgroundVideoMp4 }}
+                        <source src="{{ .Site.Data.jumbotron.backgroundVideoMp4 }}" type="video/mp4">
+                    {{ end }}
+                    {{ if .Site.Data.jumbotron.backgroundVideoWebm }}
+                        <source src="{{ .Site.Data.jumbotron.backgroundVideoWebm }}" type="video/webm">
+                    {{ end }}
             </video>
         </div>
     {{ end }}