Add macro for YouTube videos

_templates/macros.html

@@ -53,3 +53,40 @@
 {%- macro page_link(id, page, site) -%}
   <a href="{{ site[id].path|relative_to(page.path) }}">{{ site[id].title }}</a>
 {%- endmacro -%}
+
+
+{%- macro youtube_video(video_url, thumbnail, caption="", play_logo="/images/yt-icons/play.svg", yt_logo="/images/yt-icons/yt-logo.svg") -%}
+  <!-- Thumbnail of Youtube video without tracking-->
+  <figure>
+  <div class="ratio ratio-16x9">
+    <div class="yt" style='background-image: url("{{ thumbnail }}")'>
+      <a
+        href="{{ video_url }}"
+        aria-label="Watch on YouTube"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Watch on YouTube"
+      >
+        <div class="play-button">
+          <img src="{{ play_logo }}" alt="Play video in YouTube">
+        </div>
+      </a>
+      <a
+        href="{{ video_url }}"
+        aria-label="Watch on YouTube"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Watch on YouTube"
+      >
+        <div class="watch-on-yt">
+          <div aria-hidden="true">Watch on</div>
+          <div><img src="{{ yt_logo }}" alt="YouTube logo"></div>
+        </div>
+      </a>
+    </div>
+  </div>
+  {% if caption != "" %}
+  <figcaption>{{ caption }}</figcaption>
+  {% endif %}
+  </figure>
+{%- endmacro -%}

css/style.css

@@ -424,3 +424,105 @@ blockquote > * + *, figure > * + *, .callout > * + * {
 .text-muted a:hover {
   color: var(--color-primary);
 }
+
+
+/* Create thumbnail for youtube videos */
+/* ----------------------------------- */
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.yt {
+  background-size: cover;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.yt a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.yt a:hover {
+  text-decoration: none;
+  color: #fff;
+}
+
+.play-button {
+  width: 68px;
+  height: 48px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -34px;
+  margin-top: -32px;
+  background-color: rgba(23, 23, 23, 0.8);
+  border-radius: 10px;
+  display: flex;
+}
+
+.play-button:hover {
+  background-color: rgba(255, 0, 0, 1);
+}
+
+.play-button img {
+  width: 25%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.watch-on-yt {
+  background-color: rgba(23, 23, 23, 0.8);
+  position: absolute;
+  left: 0px;
+  top: auto;
+  bottom: 5px;
+  height: 48px;
+  width: auto;
+  padding: 10px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--size-0);
+  line-height: var(--size-0);
+}
+
+.watch-on-yt img {
+  height: var(--size-0);
+  width: auto;
+  margin-left: 0.5rem;
+  padding-bottom: 1px;
+}
+/* ----------------------------------- */

news/science-day-2024.md

@@ -1,7 +1,7 @@
 ---
 title: "IAG | Science Day 2024"
 date: 2024-09-23
-author: Yago Moreira Castro 
+author: Yago Moreira Castro
 ---
 
 {%- import "macros.html" as macros %}
@@ -10,15 +10,32 @@ author: Yago Moreira Castro
 
 **This month**, [Arthur Siqueira de Macêdo](../team#arthursmacedo) and I had the opportunity to present our MSc projects at the **IAG | Science Day**. This event gathers members of the IAG for **5-minute presentations**, where researchers give concise summaries of their work to a broad audience from our institute. It was a **challenging** but interesting experience, as we’re not used to delivering such brief presentations, but it pushed us to communicate our ideas **clearly and efficiently**.
 
-The links to our presentations are listed below:
+{{ macros.figure("../images/news/science-day-2024-arthur.jpg", caption="Arthur presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a white t-shirt) next to presentation screen with a slide containing a diagram about aeromagnetic surveys. Also seen are the backs of the heads of 7 audience members." ) }}
 
-* [Integração de dados aerogeofísicos em escala continental (Arthur's presentation)](https://www.youtube.com/live/5ZxFyw3ZN6s?si=BqXHaO90SEd1-OFi&t=4639)
-* [Magali (Yago's presentation)](https://www.youtube.com/live/5ZxFyw3ZN6s?si=sdQxzEzJsymJTcFI&t=3367)
+{{ macros.figure("../images/news/science-day-2024-yago.jpg", caption="Yago presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a green shirt) next to presentation screen with a slide containing a Magali`s logo (a watermelon-like figure in which its seeds resemble magnetic dipoles, followed by the project's name). Also seen are the backs of the heads of 3 audience members." ) }}
 
-<br>
+## Watch the talks
 
-{{ macros.figure("../images/news/science-day-2024-arthur.jpg", caption="Arthur presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a white t-shirt) next to presentation screen with a slide containing a diagram about aeromagnetic surveys. Also seen are the backs of the heads of 7 audience members." ) }}
 
-{{ macros.figure("../images/news/science-day-2024-yago.jpg", caption="Yago presenting his MSc project at IAG | Science Day 2024", alt="Presenter (light-skinned male in a green shirt) next to presentation screen with a slide containing a Magali`s logo (a watermelon-like figure in which its seeds resemble magnetic dipoles, followed by the project's name). Also seen are the backs of the heads of 3 audience members." ) }}
+{{
+macros.youtube_video(
+  "https://www.youtube.com/live/5ZxFyw3ZN6s?si=BqXHaO90SEd1-OFi&t=4639",
+  "../images/news/science-day-2024-arthur-video-thumb.jpg",
+  caption="Integração de dados aerogeofísicos em escala continental. Arthur Siqueira de Macêdo."
+)
+}}
+
+### [Magali (Yago's presentation)](https://www.youtube.com/live/5ZxFyw3ZN6s?si=sdQxzEzJsymJTcFI&t=3367)
+
+{{
+macros.youtube_video(
+  "https://www.youtube.com/live/5ZxFyw3ZN6s?si=sdQxzEzJsymJTcFI&t=3367",
+  "../images/news/science-day-2024-yago-video-thumb.jpg",
+  caption="Magalí: Modelling and inversion of magnetic microscopy data. Moreira Castro."
+)
+}}
+
+
+## Get the slides
 
 My presentation is released under a Creative Commons Attribution 4.0 International License and is available in the GitHub repository [<i class="fab fa-github" aria-hidden="true"></i> YagoMCastro/science-day-2024-magali](https://github.com/YagoMCastro/science-day-2024-magali).