Implement YH4F videobox

This commit is contained in:
2025-01-24 08:09:14 +00:00
parent 421b2eeb92
commit 257d923f90
4 changed files with 100 additions and 1 deletions
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" ?>
<talkset>
<version>1</version>
<talk>
<title>Youth Hacking 4 Freedom</title>
<iframe-url>https://media.fsfe.org/videos/embed/0dbe49c1-bd7d-44ca-bb97-1b922b3e110e?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
<external-url>https://media.fsfe.org/w/2GqZexjuYceajrbo7B8Sc1</external-url>
</talk>
<talk>
<title>LUGA 2023: Youth Hacking 4 Freedom - Hacking competition for teenagers from Europe</title>
<iframe-url>https://media.fsfe.org/videos/embed/8b2d8bb6-0284-4f0e-b614-8ca55cd32c94?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
<external-url>https://media.fsfe.org/w/ibNDS7ojB7eHpenrXS835d</external-url>
</talk>
<talk>
<title>FOSDEM 2024 - Presenting Youth Hacking 4 Freedom, FSFE programming competition for European teenagers</title>
<iframe-url>https://media.fsfe.org/videos/embed/3e64d66f-f2fd-4927-80b9-a63dca49aece?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
<external-url>https://media.fsfe.org/w/8GSutX7VcnGtMiqm3Ng96m</external-url>
</talk>
<talk>
<title>38c3 Lightning Talks - \"Youth Hacking 4 Freedom\"</title>
<iframe-url>https://media.fsfe.org/videos/embed/32cf8100-48c4-4194-9cd2-8838ca2fb01e?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
<external-url>https://media.fsfe.org/w/7gULawAUxMXp1tcnShiX4d</external-url>
</talk>
</talkset>
+2
View File
@@ -96,6 +96,8 @@ We have an international <a href="/activities/yh4f/jury.html">jury</a>, with lum
educative and exciting days in Brussels and socialise with fellow winners.
</p>
<talks/>
<h2>2024 Winners</h2>
<figure>
+2 -1
View File
@@ -1,3 +1,4 @@
fsfe.org/activities/yh4f/data/talks*:[]
fsfe.org/news/202*/*:[routers]
fsfe.org/news/202*/.*:[routers]
global/countries/countries:[]
global/countries/countries:[]
+67
View File
@@ -13,4 +13,71 @@
<xsl:with-param name="subset" select="'yh4f'"/>
</xsl:call-template>
</xsl:template>
<!-- "Videobox" (provisional name) with YH4F/related talks -->
<xsl:template match="talks">
<style>
#yh4f-slideshow-caption {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
}
#yh4f-iframe {
position: absolute;
inset: 0px;
min-height: 480px;
width: 100%;
}
</style>
<figure>
<div>
<div style="min-width: 720px; min-height: 480px">
<iframe id="yh4f-iframe" src="https://media.fsfe.org/videos/embed/0dbe49c1-bd7d-44ca-bb97-1b922b3e110e" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" />
</div>
</div>
<figcaption id="yh4f-slideshow-caption">
<button onclick="prevVideo();"></button>
<a id="yh4f-title" href="https://media.fsfe.org/w/2GqZexjuYceajrbo7B8Sc1">Youth Hacking 4 Freedom</a>
<button onclick="nextVideo();"></button>
</figcaption>
</figure>
<script type="text/javascript">
/* &lt;![CDATA[ */
var videos = [
<xsl:for-each select="/buildinfo/document/set/talk">
{
title: "<xsl:value-of select="title"/>",
iframe_url: "<xsl:value-of select="iframe-url"/>",
external_url: "<xsl:value-of select="external-url"/>",
},
</xsl:for-each>
];
<![CDATA[
var index = Math.floor(Math.random()*videos.length);
function nextVideo() {
index = (index+1)%videos.length;
updateVideo();
}
function prevVideo() {
index = (index-1+videos.length)%videos.length;
updateVideo();
}
function updateVideo() {
$('#yh4f-iframe').attr("src", videos[index]['iframe_url']);
$('#yh4f-title').attr("href", videos[index]['external_url']);
$('#yh4f-title').text(videos[index]['title']);
}
]]>
/* ]]&gt; */
</script>
</xsl:template>
</xsl:stylesheet>