From 298e6180015f306273b6f7a3a956e4590197fe20 Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Tue, 12 Sep 2017 14:11:13 +0200
Subject: [PATCH] use vimeo as primary video solution, and provide easy switch
 back to fsfe download server

---
 site/layouts/partials/about.html              | 36 +------------------
 .../partials/functions/video_fsfe.html        | 35 ++++++++++++++++++
 .../partials/functions/video_vimeo.html       |  3 ++
 site/static/css/custom.css                    | 15 ++++++++
 4 files changed, 54 insertions(+), 35 deletions(-)
 create mode 100644 site/layouts/partials/functions/video_fsfe.html
 create mode 100644 site/layouts/partials/functions/video_vimeo.html

diff --git a/site/layouts/partials/about.html b/site/layouts/partials/about.html
index 6648be8..c4944c4 100644
--- a/site/layouts/partials/about.html
+++ b/site/layouts/partials/about.html
@@ -11,41 +11,7 @@
                 {{ end }}
                 
                 <!-- VIDEO -->
-                <center>
-                  <video controls="controls" poster="/img/poster.jpg" crossorigin="crossorigin" width="100%">
-                    <source src="https://download.fsfe.org/videos/pmpc/pmpc_desktop.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="screen and (min-device-width:1000px)" />
-                    <source src="https://download.fsfe.org/videos/pmpc/pmpc_desktop.webm" type='video/webm; codecs="vp9, opus"' media="screen and (min-device-width:1000px)" />
-                    <source src="https://download.fsfe.org/videos/pmpc/pmpc_mobile.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="screen and (max-device-width:999px)" />
-                    <source src="https://download.fsfe.org/videos/pmpc/pmpc_mobile.webm" type='video/webm; codecs="vp9, opus"' media="screen and (max-device-width:999px)" />
-                    
-                    <!--
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.en.vtt" kind="subtitle" srclang="en" label="English" default="default">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.de.vtt" kind="subtitle" srclang="de" label="Deutsch">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.el.vtt" kind="subtitle" srclang="el" label="Ελληνικά">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.es.vtt" kind="subtitle" srclang="es" label="Español">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.fr.vtt" kind="subtitle" srclang="fr" label="Français">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.it.vtt" kind="subtitle" srclang="it" label="Italian">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.nl.vtt" kind="subtitle" srclang="nl" label="Nederlands">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.sq.vtt" kind="subtitle" srclang="sq" label="Shqip">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.tr.vtt" kind="subtitle" srclang="tr" label="Türkçe">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.sr.vtt" kind="subtitle" srclang="sr" label="српски">
-                    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.et.vtt" kind="subtitle" srclang="et" label="eesti keel">
-
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.en.srt" kind="subtitle" srclang="en" label="English">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.de.srt" kind="subtitle" srclang="de" label="Deutsch">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.el.srt" kind="subtitle" srclang="el" label="Ελληνικά">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.es.srt" kind="subtitle" srclang="es" label="Español">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.fr.srt" kind="subtitle" srclang="fr" label="Français">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.it.srt" kind="subtitle" srclang="it" label="Italian">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.nl.srt" kind="subtitle" srclang="nl" label="Nederlands">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.sq.srt" kind="subtitle" srclang="sq" label="Shqip">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.tr.srt" kind="subtitle" srclang="tr" label="Türkçe">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.sr.srt" kind="subtitle" srclang="sr" label="српски">
-                    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.et.srt" kind="subtitle" srclang="et" label="eesti keel">
-                    -->
-
-                  </video>
-                </center>
+                {{ partial "functions/video_vimeo.html" . }}
                 <!-- /VIDEO -->
                 
                 {{ with .Site.Params.about.description }}
diff --git a/site/layouts/partials/functions/video_fsfe.html b/site/layouts/partials/functions/video_fsfe.html
new file mode 100644
index 0000000..a1fb435
--- /dev/null
+++ b/site/layouts/partials/functions/video_fsfe.html
@@ -0,0 +1,35 @@
+<center>
+  <video controls="controls" poster="/img/poster.jpg" crossorigin="crossorigin" width="100%">
+    <source src="https://download.fsfe.org/videos/pmpc/pmpc_desktop.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="screen and (min-device-width:1000px)" />
+    <source src="https://download.fsfe.org/videos/pmpc/pmpc_desktop.webm" type='video/webm; codecs="vp9, opus"' media="screen and (min-device-width:1000px)" />
+    <source src="https://download.fsfe.org/videos/pmpc/pmpc_mobile.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="screen and (max-device-width:999px)" />
+    <source src="https://download.fsfe.org/videos/pmpc/pmpc_mobile.webm" type='video/webm; codecs="vp9, opus"' media="screen and (max-device-width:999px)" />
+    
+    <!--
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.en.vtt" kind="subtitle" srclang="en" label="English" default="default">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.de.vtt" kind="subtitle" srclang="de" label="Deutsch">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.el.vtt" kind="subtitle" srclang="el" label="Ελληνικά">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.es.vtt" kind="subtitle" srclang="es" label="Español">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.fr.vtt" kind="subtitle" srclang="fr" label="Français">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.it.vtt" kind="subtitle" srclang="it" label="Italian">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.nl.vtt" kind="subtitle" srclang="nl" label="Nederlands">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.sq.vtt" kind="subtitle" srclang="sq" label="Shqip">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.tr.vtt" kind="subtitle" srclang="tr" label="Türkçe">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.sr.vtt" kind="subtitle" srclang="sr" label="српски">
+    <track src="https://download.fsfe.org/videos/15years/vtt/15years-FSFE.et.vtt" kind="subtitle" srclang="et" label="eesti keel">
+
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.en.srt" kind="subtitle" srclang="en" label="English">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.de.srt" kind="subtitle" srclang="de" label="Deutsch">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.el.srt" kind="subtitle" srclang="el" label="Ελληνικά">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.es.srt" kind="subtitle" srclang="es" label="Español">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.fr.srt" kind="subtitle" srclang="fr" label="Français">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.it.srt" kind="subtitle" srclang="it" label="Italian">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.nl.srt" kind="subtitle" srclang="nl" label="Nederlands">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.sq.srt" kind="subtitle" srclang="sq" label="Shqip">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.tr.srt" kind="subtitle" srclang="tr" label="Türkçe">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.sr.srt" kind="subtitle" srclang="sr" label="српски">
+    <track src="https://download.fsfe.org/videos/15years/srt/15years-FSFE.et.srt" kind="subtitle" srclang="et" label="eesti keel">
+    -->
+
+  </video>
+</center>
diff --git a/site/layouts/partials/functions/video_vimeo.html b/site/layouts/partials/functions/video_vimeo.html
new file mode 100644
index 0000000..5e91441
--- /dev/null
+++ b/site/layouts/partials/functions/video_vimeo.html
@@ -0,0 +1,3 @@
+<div class="embedvideo">
+  <iframe src="https://player.vimeo.com/video/232524527" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+</div>
diff --git a/site/static/css/custom.css b/site/static/css/custom.css
index de315ef..4730a83 100644
--- a/site/static/css/custom.css
+++ b/site/static/css/custom.css
@@ -27,6 +27,21 @@ blockquote p {
   height: auto   !important;
   margin-bottom: 20px;
 }
+.embedvideo {
+  max-width: 100%;
+  height: auto;
+  position: relative;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.embedvideo iframe, .embedvideo object, .embedvideo embed { 
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 
 /* ARGUMENTS SECTION */
 #arguments #arguments-followup p {