This is an automated email from the ASF dual-hosted git repository.
janc pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/mynewt-site.git
The following commit(s) were added to refs/heads/master by this push:
new 7a42ae6b72 custom-theme/talks: Replace iframe elements with thumbnails
7a42ae6b72 is described below
commit 7a42ae6b7282a07363cd6d5b3850d7545178388c
Author: Wojciech Pietraszewski <[email protected]>
AuthorDate: Fri Aug 2 16:08:41 2024 +0200
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.
---
custom-theme/css/custom.css | 24 ++++++++++++++++++++++++
custom-theme/talks.html | 25 +++++++++----------------
2 files changed, 33 insertions(+), 16 deletions(-)
diff --git a/custom-theme/css/custom.css b/custom-theme/css/custom.css
index 4d6f8bd697..a51d8ea3c3 100644
--- 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
index aab03333f3..7b8d9c087e 100644
--- a/custom-theme/talks.html
+++ b/custom-theme/talks.html
@@ -8,11 +8,9 @@
<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 @@
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">
