Skip to content

Commit 12e0690

Browse files
jeanjeromejeanjerome
committed
feat(video): add YouTube video integration with lazy loading and play button overlay
1 parent d2579e5 commit 12e0690

File tree

5 files changed

+139
-4
lines changed

5 files changed

+139
-4
lines changed

‎_plugins/youtube.rb

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Licensed to the Apache Software Foundation (ASF) under one
2+
# or more contributor license agreements. See the NOTICE file
3+
# distributed with this work for additional information
4+
# regarding copyright ownership. The ASF licenses this file
5+
# to you under the Apache License, Version 2.0 (the
6+
# "License"); you may not use this file except in compliance
7+
# with the License. You may obtain a copy of the License at
8+
#
9+
# http://www.apache.org/licenses/LICENSE-2.0
10+
#
11+
# Unless required by applicable law or agreed to in writing,
12+
# software distributed under the License is distributed on an
13+
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
# KIND, either express or implied. See the License for the
15+
# specific language governing permissions and limitations
16+
# under the License.
17+
18+
# Modified version from source code: https://privacy.apache.org/guides/jekyll-youtube-plugin.html
19+
20+
module Jekyll
21+
class YouTube < Liquid::Tag
22+
def initialize(tag_name, text, tokens)
23+
super
24+
@text = text.strip
25+
end
26+
27+
def render(context)
28+
video_id, image_url = @text.split(' ')
29+
site = context.registers[:site]
30+
lang = context["page.lang"] || site.config["default_lang"] || "en"
31+
if (lang == "fr")
32+
youtube_notice = "En cliquant sur cette image, la vidéo se chargera et des données seront échangées avec YouTube/Google."
33+
else
34+
youtube_notice = "Clicking on this image will load the video and send data from and to YouTube/Google."
35+
end
36+
37+
<<~HTML
38+
<div class="youtube-placeholder yt-container-#{video_id}" style="cursor: pointer;">
39+
<img src="#{image_url}" alt="Video thumbnail" class="youtube-thumbnail">
40+
<svg class="youtube-play-button" viewBox="0 0 68 48" width="68" height="48">
41+
<path class="youtube-play-button-bg" d="M66.52 7.66c-.78-2.92-3.08-5.22-6-6C55.08 0 34 0 34 0S12.92 0 7.48 1.66c-2.92.78-5.22 3.08-6 6C0 13.92 0 24 0 24s0 10.08 1.48 16.34c.78 2.92 3.08 5.22 6 6C12.92 48 34 48 34 48s21.08 0 26.52-1.66c2.92-.78 5.22-3.08 6-6C68 34.08 68 24 68 24s0-10.08-1.48-16.34z"></path>
42+
<path class="youtube-play-button-icon" d="M45 24l-15-9v18"></path>
43+
</svg>
44+
</div>
45+
<div class="youtube-placeholder-description">
46+
#{youtube_notice}
47+
</div>
48+
<script>
49+
document.addEventListener('DOMContentLoaded', function() {
50+
var container = document.querySelector('.yt-container-#{video_id}');
51+
function addElement() {
52+
var iframe = document.createElement('iframe');
53+
iframe.setAttribute('width', '560');
54+
iframe.setAttribute('height', '315');
55+
iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/#{video_id}?autoplay=1');
56+
iframe.setAttribute('title', 'YouTube video player');
57+
iframe.setAttribute('frameborder', '0');
58+
iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
59+
iframe.setAttribute('allowfullscreen', '');
60+
container.innerHTML = '';
61+
container.appendChild(iframe);
62+
}
63+
container.addEventListener('click', addElement);
64+
});
65+
</script>
66+
HTML
67+
end
68+
end
69+
end
70+
71+
Liquid::Template.register_tag('youtube', Jekyll::YouTube)

‎_posts/2025-02-17-drone-swarms.markdown

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,15 @@ L’essor des essaims de drones marque une **révolution technologique** dans de
2323

2424
Ces deux exemples mettent en évidence le potentiel et la dualité des essaims de drones : une technologie qui peut être utilisée aussi bien pour la guerre que pour émerveiller les spectateurs à travers des démonstrations artistiques d’une grande précision.
2525

26+
2627
> info "🛠 Expérimentez un Essaim de Drones en Simulation"
2728
>
2829
> Pour mieux comprendre comment quelques règles simples permettent de générer un **essaim de drones autonome et coordonné**, vous pouvez explorer un **programme de simulation** que j’ai développé. Ce projet, bien que basique, illustre comment des algorithmes de **cohésion, d’évitement et d’alignement** peuvent produire un comportement collectif ordonné.
29-
> <br>
30-
> {% github_card jeanjerome/drone-swarms %}
30+
<br>
31+
{% github_card jeanjerome/drone-swarms %}
32+
<br>
33+
{% youtube 5PN6R7qeXt8 /assets/img/drone-swarms.png %}
34+
3135

3236
<hr class="hr-text" data-content="Sommaire">
3337

‎_posts/en/2025-02-17-drone-swarms.markdown

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ These two examples highlight both the potential and the dual nature of drone swa
2626
> info "🛠 Experiment with a Drone Swarm Simulation"
2727
>
2828
> To better understand how a few simple rules can generate an **autonomous and coordinated drone swarm**, you can explore a **simulation program** I developed. Although basic, this project illustrates how **cohesion, avoidance, and alignment** algorithms can produce an orderly collective behavior.
29-
> <br>
30-
> {% github_card jeanjerome/drone-swarms %}
29+
<br>
30+
{% github_card jeanjerome/drone-swarms %}
31+
<br>
32+
{% youtube 5PN6R7qeXt8 /assets/img/drone-swarms.png %}
3133

3234
<hr class="hr-text" data-content="Table of Contents">
3335

‎_sass/parts/_post-page.scss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -780,3 +780,61 @@ a.card-source.microlink_vanilla {
780780
border: 3px solid var(--discreet-color);
781781
border-radius: 5px;
782782
}
783+
784+
.youtube-placeholder {
785+
display: flex;
786+
justify-content: center;
787+
align-items: center;
788+
position: relative;
789+
width: 100%;
790+
max-width: 800px;
791+
margin: 0 auto;
792+
793+
&::before {
794+
content: "";
795+
display: block;
796+
padding-top: 56.25%;
797+
}
798+
799+
.youtube-thumbnail {
800+
width: 100%;
801+
height: auto;
802+
display: block;
803+
}
804+
805+
.youtube-play-button {
806+
position: absolute;
807+
top: 50%;
808+
left: 50%;
809+
transform: translate(-50%, -50%);
810+
width: 80px;
811+
height: 60px;
812+
813+
.youtube-play-button-bg {
814+
fill: #ff0000;
815+
rx: 10;
816+
}
817+
818+
.youtube-play-button-icon {
819+
fill: white;
820+
stroke: white;
821+
stroke-width: 2;
822+
}
823+
}
824+
825+
iframe {
826+
position: absolute;
827+
top: 0;
828+
left: 0;
829+
width: 100%;
830+
height: 100%;
831+
border: none;
832+
}
833+
}
834+
835+
.youtube-placeholder-description {
836+
color: var(--discreet-color);
837+
font-style: italic;
838+
text-align: center;
839+
margin-top: 10px;
840+
}

‎assets/img/drone-swarms.png

2.53 MB
Loading

0 commit comments

Comments
 (0)