custom-theme/talks: Replace iframe elements with thumbnails

Due to Content Security Policy (CSP) restrictions that block embedded videos, this commit replaces <iframe> elements with hyperlinked thumbnails.
apache · Aug 5, 2024 · 7a42ae6 · 7a42ae6
1 parent ecad57c
commit 7a42ae6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/custom-theme/css/custom.css b/custom-theme/css/custom.css
@@ -486,3 +486,27 @@ code {
   display: inline-block;
   font-size: 12px;
 }
+
+.thumbnail-container {
+    position: relative;
+    display: block;
+    width: 560px;
+    height: 314px;
+    overflow: hidden;
+    background-size: cover;
+    background-position: center center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.thumbnail-container .play-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 70px;
+    height: 70px;
+    background: url('https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg') no-repeat center center;
+    background-size: contain;
+    pointer-events: none;
+}
diff --git a/custom-theme/talks.html b/custom-theme/talks.html
@@ -8,11 +8,9 @@ <h2>Talks from Mynewt participants</h2>
 <div class="row">
 
   <div class="col-xs-12 col-md-6">
-
-    <iframe width="560" height="315"
-            src="https://www.youtube.com/embed/4xRbGMDcMu8?si=SZbkHO08iLHDJF_N"
-            title="Apache Mynewt Overview" frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="padding-top: 20px;"></iframe>
+    <a href="https://youtu.be/4xRbGMDcMu8" target="_blank" class="thumbnail-container" style="background-image: url('https://img.youtube.com/vi/4xRbGMDcMu8/0.jpg');">
+      <div class="play-button"></div>
+    </a>
   </div>
 
   <div class="col-xs-12 col-md-6">
@@ -40,21 +38,16 @@ <h3>MyNewt technical Overview</h3>
     This presentation helps developers up and down the stack understand the requirements and challenges of embedded development environments – whether they are using common maker environments like Arduino or mature product-oriented tools. It covers the salient goals and features of Mynewt, the open source OS for MCUs.
     </p>
   </div>
-
-  <div class="col-xs-12 col-md-6">
-    <iframe width="560" height="315"
-            src="https://www.youtube.com/embed/5KhnjE7zYx4?si=2eEdqrV6e3Rq3Tjf"
-            title="LAS16-104: MyNewt technical Overview" frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="padding-top: 20px; padding-bottom: 20px;"></iframe>
-  </div>
+    <a href="https://youtu.be/5KhnjE7zYx4" target="_blank" class="thumbnail-container" style="background-image: url('https://img.youtube.com/vi/5KhnjE7zYx4/0.jpg');">
+      <div class="play-button"></div>
+    </a>
 </div>
 
 <div class="row">
-
   <div class="col-xs-12 col-md-6">
-    <iframe width="560" height="315"
-            src="https://www.youtube.com/embed/RsDqH5FZ-bo?si=WSg1FfcxwejL-Qqm"
-            title="Apache Mynewt: The Next Great Open Source OS for 32 Bit MCUs Coming to a RISC-V" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="padding-top: 20px; padding-bottom: 20px;"></iframe>
+    <a href="https://youtu.be/RsDqH5FZ-bo" target="_blank" class="thumbnail-container" style="background-image: url('https://img.youtube.com/vi/RsDqH5FZ-bo/0.jpg');">
+      <div class="play-button"></div>
+    </a>
   </div>
 
   <div class="col-xs-12 col-md-6">