convert Vimeo embedds to shortcode + responsive video wrapper styling

README.md

@@ -14,6 +14,19 @@ Run Hugo dev server with autocompile of assets
     $ yarn start
 
 
+## Formatting notes
+
+**YouTube/Vimeo**
+
+Using Hugo's built-in video shortcodes ([source](https://gohugo.io/content-management/shortcodes/#vimeo)):
+
+    {{< vimeo id="146022717" class="responsive-video ratio-16by10" title="My vimeo video" >}}
+    {{< youtube id="w7Ft2ymGmfc" title="A New Hugo Site in Under Two Minutes" >}}
+
+- keep the `responsive-video` class intact
+- use `ratio-16by10` or `ratio-4by3` class to fix aspect ratio if video is different than 16:9
+
+
 ## TODO
 
 - config/_default/params.toml

assets/scss/_kerberos.scss

@@ -83,6 +83,24 @@ img {
 
 // ----- UI ----- //
 
+.responsive-video {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  margin: 2rem 0 0;
+  border-radius: var(--radius);
+  &.ratio-16by10 { padding-bottom: 62.5%; }
+  &.ratio-4by3 { padding-bottom: 75%; }
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
 
 // ----- Layout ----- //
 

content/_index.md

@@ -15,7 +15,7 @@ toc: true
 
 The **Kerberos(dot)io** project, is a video surveillance solution, which was initiated back in 2014. Over the years it has evolved into a trusted, stable and feature-rich video surveillance system. To set the expectations, watch the video below to understand what it can and can't do. If you want to install Kerberos(dot)io, it's recommended to have a look [at the architectures page](/prologue/deployments/) to find the best solution for your usecase.
 
-<div class='embed-container'><iframe src="https://player.vimeo.com/video/382090189" width="100%" height="400" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
+{{< vimeo id="382090189" class="responsive-video ratio-16by10" title="Kerberos introduction" >}}
 
 ## The name: Kerberos.io
 

content/enterprise/first-things-first/index.md

@@ -30,9 +30,8 @@ The major key differentiators compared to to other solutions are:
 - Host anywhere, in the cloud or on premise,
 - Integration and extension, allowing to build custom apps, ML services and more.
 
-<br/>
-<div class='embed-container'><iframe src="https://player.vimeo.com/video/405037695" width="640" height="400" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
-<br/><br/>
+{{< vimeo id="405037695" class="responsive-video ratio-16by10" title="Kerberos Enterprise introduction" >}}
+
 
 ## Kubernetes
 

content/enterprise/get-started/index.md

@@ -18,9 +18,7 @@ Once you've installed Kerberos Enterprise, you will have the Kerberos Enterprise
 
 Important to note is that this web app is relying on the Golang Kubernetes SDK, so that means from an administration point of view, you could simply use the well known `kubectl` command. The webapp just add (a lot of) functionalities on top of the Kubernetes API, which are specific to Kerberos Enterprise agents.
 
-<br/>
-<div class='embed-container'><iframe src="https://player.vimeo.com/video/405039357" width="640" height="400" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
-<br/><br/>
+{{< vimeo id="405039357" class="responsive-video ratio-16by10" title="Kerberos Enterprise - Getting started" >}}
 
 ## Login page
 

content/enterprise/installation-cloud/index.md

@@ -16,17 +16,14 @@ toc: true
 Start by installing a Kubernetes cluster. This can be done on one of the hyperscalers (**AWS**, **GCP** or **Azure**),
 cloud providers (Digital Ocean, Scaleway, etc) or on-premise in your own private network.
 
-<br/>
-<div class='embed-container'><iframe src="https://player.vimeo.com/video/404813147" width="640" height="400" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
-<br/><br/>
+{{< vimeo id="404813147" class="responsive-video ratio-16by10" title="Running a Kubernetes cluster in the cloud?" >}}
+
 
 ## Installation
 
 Before setting up Kerberos Enterprise, some configuration needs to happen. First thing that we need to do is setting up the RBAC permissions (Role Based Access Control). We need to enable this to be able to query specific endpoints from the Kubernetes API. By default these endpoints are locked, so we need to unlock them.
 
-<br/>
-<div class='embed-container'><iframe src="https://player.vimeo.com/video/404767375" width="640" height="400" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
-<br/><br/>
+{{< vimeo id="404767375" class="responsive-video ratio-16by10" title="Install Kerberos Enterprise in your cluster" >}}
 
 First clone the configrations from our Github repo.
 

content/vault/installation-cloud/index.md

@@ -15,9 +15,7 @@ toc: true
 
 If not already the case, start by installing a Kubernetes cluster. This can be done on one of the hyperscalers (**AWS**, **GCP** or **Azure**), cloud providers (Digital Ocean, Scaleway, etc) or on-premise in your own private network.
 
-<br/>
-<div class='embed-container'><iframe src="https://player.vimeo.com/video/404813147" width="640" height="400" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
-<br/><br/>
+{{< vimeo id="404813147" class="responsive-video ratio-16by10" title="Running a Kubernetes cluster in the cloud?" >}}
 
 ## Prerequisites
 

resources/_gen/assets/scss/scss/app.scss_1920d2ec1ff1120c91690141d2072447.content

@@ -9769,6 +9769,25 @@ strong {
 img {
   max-width: 100%; }
 
+.responsive-video {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  margin: 2rem 0 0;
+  border-radius: var(--radius); }
+  .responsive-video.ratio-16by10 {
+    padding-bottom: 62.5%; }
+  .responsive-video.ratio-4by3 {
+    padding-bottom: 75%; }
+  .responsive-video iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0; }
+
 .navbar {
   margin-top: 6px; }
   .navbar .navbar-nav .nav-link, .navbar .navbar-nav .banner .nav a, .banner .nav .navbar .navbar-nav a {