From 04a1970fff1913d1fc8dca35b537bbdbd1e1b47c Mon Sep 17 00:00:00 2001
From: Gianmarco Gargiulo <me@gianmarco.gg>
Date: Mon, 8 May 2023 23:37:21 +0200
Subject: [PATCH] Added video embeds shortcode (experimental)

---
 themes/hugo-casper3/assets/scss/custom.scss   | 43 +++++++++++++++++++
 .../layouts/shortcodes/video.html             | 35 +++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 themes/hugo-casper3/layouts/shortcodes/video.html

diff --git a/themes/hugo-casper3/assets/scss/custom.scss b/themes/hugo-casper3/assets/scss/custom.scss
index c524f1e..482d4a5 100644
--- a/themes/hugo-casper3/assets/scss/custom.scss
+++ b/themes/hugo-casper3/assets/scss/custom.scss
@@ -8,6 +8,49 @@
   margin-left: auto;
 }
 
+/* VIDEO TABS */
+
+.tabs {
+  list-style: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  font-family: sans-serif
+}
+.tabs li {
+  display: inline-block;
+}
+.tabs input[type="radio"] {
+  display: none;
+}
+.tabs label {
+  display: block;
+  cursor: pointer;
+  padding: 10px 15px;
+  border: 2px solid black;
+  border-bottom: 0;
+  border-radius: 3px 3px 0 0;
+  background-color: black;
+}
+.tabs .tab-panel {
+  display: none;
+  overflow: hidden;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  border-top: 2px solid gray;
+}
+
+.tabs [id^="tab"]:checked + label {
+  background-color: gray;
+  border: 2px solid gray;
+  color: #fff;
+}
+.tabs [id^="tab"]:checked ~ [id^="tab-panel"] {
+  display: block;
+}
+
 /* FONTS */
 
 @font-face {
diff --git a/themes/hugo-casper3/layouts/shortcodes/video.html b/themes/hugo-casper3/layouts/shortcodes/video.html
new file mode 100644
index 0000000..0436615
--- /dev/null
+++ b/themes/hugo-casper3/layouts/shortcodes/video.html
@@ -0,0 +1,35 @@
+<div class="embed video-player">
+<ul class="tabs">
+  <li>
+    <input id="tab1" type="radio" name="tabs" checked />
+    <label for="tab1">Piped (il.ax)</label>
+    <div id="tab-panel1" class="tab-panel">
+      <iframe class="youtube-player" type="text/html" width="700" height="385" src="https://il.ax/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0"></iframe>
+    </div>
+  </li>
+  <li>
+    <input id="tab2" type="radio" name="tabs" />
+    <label for="tab2">YouTube</label>
+    <div id="tab-panel2" class="tab-panel">
+      <iframe class="youtube-player" type="text/html" width="700" height="385" src="https://ytr.gianmarco.gg/?code={{ index .Params 0 }}" allowfullscreen frameborder="0"></iframe>
+    </div>
+  </li>
+  <li>
+    <input id="tab3" type="radio" name="tabs" />
+    <label for="tab3">Odysee</label>
+    <div id="tab-panel3" class="tab-panel">
+      <iframe class="youtube-player" type="text/html" width="700" height="385" src="https://ytr.gianmarco.gg/odysee/?code={{ index .Params 1 }}" allowfullscreen frameborder="0"></iframe>
+    </div>
+  </li>
+  <li>
+    <input id="tab4" type="radio" name="tabs" />
+    <label for="tab4">PeerTube</label>
+    <div id="tab-panel4" class="tab-panel">
+      <iframe class="youtube-player" type="text/html" width="700" height="385" src="https://peertube.uno/videos/embed/{{ index .Params 2 }}" allowfullscreen frameborder="0"></iframe>
+    </div>
+  </li>
+</ul>
+</div>
+
+<!-- og width was 640 -->
+<!-- shortcode: {{< video NX6z--cOpYI "🇮🇹-perché-il-web-moderno-fa:b" 1d5487b5-8727-491f-b9cb-3c22a8dce7d2 >}} -->