add seperate video templates for drm/no drm

content/lounge.md

@@ -33,7 +33,7 @@ menu:
 | --------- | ---------------------------------------------------------------- | --- |
 | 16:30 CET | sun_or_cloudz_ _dubtechno _dub _110bpm _live 	       		| no |
 | 18:30 CET | Tün Ni _deep _techno _live				       	| no |
-| 21:00 CET | [TKG _Live Techno](/lounge/tkg)					       | yes |
+| 21:00 CET | [TKG _Live Techno](/archive/tkg)					       | yes |
 | 22:00 CET | Åis _analogsession _techno _live				       | yes |
 | 23:45 CET | Noisemaker _techno _live			                       | no  |
 

layouts/shortcodes/recording_video.html

@@ -1,52 +1,6 @@
-<div id="vcon">
-<button id="pp">Play</button>
-<button id="vol">Volume: 100%</button>
-<button id="vd">-</button>
-<button id="vi">+</button>
-<div id="vidiv">
 <figure>
-  <video preload="none" controlsList="nodownload" id="drm" width="1280" height="720">
+  <video preload="none" controls src="{{ .Get "mp4" }}"  width="1280" height="720" poster="/videoposter.jpg">
   </video>
   <figcaption>{{ .Get "alt" }}</figcaption>
 </figure>
-</div>
-<div id="firewall"></div>
-</div>
-<script>
-    let firewall = document.getElementById("firewall");
-    let vid = document.getElementById("drm");
-    vid.oncontextmenu = ()=>false
-    vid.src = atob("{{ .Get "mp4" | base64Encode}}");
-    let pbutton = document.getElementById("pp");
-    pbutton.onclick = ()=>{
-      if(vid.paused){
-        vid.play();
-        pbutton.textContent="Pause";
-      }else{
-        vid.pause();
-        pbutton.textContent="Play";
-      }
-    }
-    firewall.onclick = pbutton.onclick;
-    let vd =  document.getElementById("vd");
-    let vi =  document.getElementById("vi");
-    vd.onclick = ()=>{
-      vid.volume = Math.max(vid.volume-.1, 0)
-      vol.textContent = `Volume: ${Math.round(vid.volume*100)}%`
-    }
-    vi.onclick = ()=>{
-      vid.volume = Math.min(vid.volume+.1, 1)
-      vol.textContent = `Volume: ${Math.round(vid.volume*100)}%`
-    }
-</script>
-<style>
-  #firewall{
-    position:absolute;
-    background-color: rgb(0, 0, 0);
-    width: 1280px;
-    height: 720px;
-    opacity: 0.0;
-  }
-  #vidiv{position:absolute;}
-  #vcon{overflow: hidden;}
-</style>
+<a href="{{ .Get "mp4" }}">Download</a>

layouts/shortcodes/recording_video_drm.html

@@ -0,0 +1,52 @@
+<div id="vcon">
+<button id="pp">Play</button>
+<button id="vol">Volume: 100%</button>
+<button id="vd">-</button>
+<button id="vi">+</button>
+<div id="vidiv">
+<figure>
+  <video preload="none" controlsList="nodownload" id="drm" width="1280" height="720" poster="/videoposter.jpg">
+  </video>
+  <figcaption>{{ .Get "alt" }}</figcaption>
+</figure>
+</div>
+<div id="firewall"></div>
+</div>
+<script>
+    let firewall = document.getElementById("firewall");
+    let vid = document.getElementById("drm");
+    vid.oncontextmenu = ()=>false
+    vid.src = atob("{{ .Get "mp4" | base64Encode}}");
+    let pbutton = document.getElementById("pp");
+    pbutton.onclick = ()=>{
+      if(vid.paused){
+        vid.play();
+        pbutton.textContent="Pause";
+      }else{
+        vid.pause();
+        pbutton.textContent="Play";
+      }
+    }
+    firewall.onclick = pbutton.onclick;
+    let vd =  document.getElementById("vd");
+    let vi =  document.getElementById("vi");
+    vd.onclick = ()=>{
+      vid.volume = Math.max(vid.volume-.1, 0)
+      vol.textContent = `Volume: ${Math.round(vid.volume*100)}%`
+    }
+    vi.onclick = ()=>{
+      vid.volume = Math.min(vid.volume+.1, 1)
+      vol.textContent = `Volume: ${Math.round(vid.volume*100)}%`
+    }
+</script>
+<style>
+  #firewall{
+    position:absolute;
+    background-color: rgb(0, 0, 0);
+    width: 1280px;
+    height: 720px;
+    opacity: 0.0;
+  }
+  #vidiv{position:absolute;}
+  #vcon{overflow: hidden;}
+</style>