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
commit 4631d4f186fbf149ed1c8b2ed75bcbc87c555799 Author: Piotr Narajowski <[email protected]> AuthorDate: Fri Apr 11 16:30:26 2025 +0200 custom-theme/talks: Fix video thumbnails Due to security policy restrictions Youtube video thumbnails were blocked. YT content is now embedded and loaded only when the visitor has given consent by clicking on play icon button. --- custom-theme/img/vid-icon-red.png | Bin 0 -> 51781 bytes custom-theme/talks.html | 42 ++++++++++++++++++++++++++++++-------- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/custom-theme/img/vid-icon-red.png b/custom-theme/img/vid-icon-red.png new file mode 100755 index 0000000000..479dfd3a2e Binary files /dev/null and b/custom-theme/img/vid-icon-red.png differ diff --git a/custom-theme/talks.html b/custom-theme/talks.html index 7b8d9c087e..0deb4de0b0 100644 --- a/custom-theme/talks.html +++ b/custom-theme/talks.html @@ -7,10 +7,27 @@ <div class="row"> + <script> + function loadYouTubeVideo(vid_url, id) { + // Replaces the placeholder with the YouTube iframe + var videoContainer = document.getElementById(id); + videoContainer.innerHTML = ` + <iframe width="560" height="315" + src="${vid_url}" + title="YouTube video player" frameborder="0" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowfullscreen> + </iframe> + `; + } + </script> + <div class="col-xs-12 col-md-6"> - <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 id="video"> + <div id="youtube-placeholder" onclick="loadYouTubeVideo('https://www.youtube.com/embed/4xRbGMDcMu8?si=h2ukdzNO9-u8_HUy', 'video')"> + <img src="/img/vid-icon-red.png" alt="Click to play video"> + </div> + </div> </div> <div class="col-xs-12 col-md-6"> @@ -38,16 +55,23 @@ 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> - <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 class="col-xs-12 col-md-6"> + <div id="video-2"> + <div id="youtube-placeholder" onclick="loadYouTubeVideo('https://www.youtube.com/embed/5KhnjE7zYx4?si=2eEdqrV6e3Rq3Tjf', 'video-2')"> + <img src="/img/vid-icon-red.png" alt="Click to play video"> + </div> + </div> + </div> </div> <div class="row"> <div class="col-xs-12 col-md-6"> - <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 id="video-3"> + <div id="youtube-placeholder" onclick="loadYouTubeVideo('https://www.youtube.com/embed/RsDqH5FZ-bo?si=WSg1FfcxwejL-Qqm', 'video-3')"> + <img src="/img/vid-icon-red.png" alt="Click to play video"> + </div> + </div> </div> <div class="col-xs-12 col-md-6">
