tidy up youtube embeds

kubernetes-sigs · Aug 5, 2019 · cb57a7c · cb57a7c
1 parent 15c248c
commit cb57a7c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/site/assets/css/inline.css b/site/assets/css/inline.css
@@ -72,6 +72,7 @@ body {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   display: flex;
   justify-content: space-between;
+  z-index: 99999;
 }
 .sidebar-collapsed #navbar{
   width: 100%;
@@ -197,6 +198,21 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
   padding-left: 1.25em;
 }
 
+/* style video embeds to be full-width in content */
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+}
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 /* mobile */
 @media (max-width: 50em) {
   #content {

diff --git a/site/config.toml b/site/config.toml
@@ -53,3 +53,9 @@ baseName = "_redirects"
 
 [outputs]
 home = ["HTML", "REDIRECTS"]
+
+# privacy settings
+[privacy]
+  [privacy.youtube]
+    # enable the cookie-less youtube in built-in hugo shortcode
+    privacyEnhanced = true
diff --git a/site/content/docs/user/resources.md b/site/content/docs/user/resources.md
@@ -18,21 +18,21 @@ The authors have given the following talks relating to kind:
 
 At KubeCon EU 2019 we spoke about [kind and testing your Kubernetes Applications][testing-k8s-apps-with-kind].
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/8KtmevMFfxA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+{{< youtube id="8KtmevMFfxA" class="video-wrapper" >}}
 
 ### Deep Dive: Testing SIG - Benjamin Elder & James Munnelly
 
 At KubeCon EU 2019 we spoke about kind and how we use it to test Kubernetes for the [SIG Testing Deep Dive][sig-testing-deep-dive-kind].
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6m9frvTxK0o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+{{< youtube id="6m9frvTxK0o" class="video-wrapper" >}}
 
 ### Behind Your PR: How Kubernetes Uses Kubernetes to Run Kubernetes CI - Sen Lu & Benjamin Elder
 
 At KubeCon NA 2018 we spoke with [Sen Lu][@krzyzacy] about The Kubernetes Project's
 testing tools and infrastructure, including a brief discussion of kind and running
 it on Kubernetes's Kubernetes-based CI infrastructure.
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pz0lpl6h-Gc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+{{< youtube id="pz0lpl6h-Gc" class="video-wrapper" >}}
 
 ## Using Kind in CI