Add videos to user guides page.

Author: realor

src/assets/css/styles.css

@@ -541,6 +541,24 @@ figure figcaption
   font-size: 0.9rem;
 }
 
+.videos
+{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 40px;
+  padding: 10px;
+}
+
+.video-player
+{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: flex;
+  flex-direction: column;
+  aspect-ratio: 16 / 9;
+}
+
 @media (max-width: 768px), (max-height: 500px)
 {
   header button.menu-toggle.image-button

src/ca/user_guides.njk

@@ -5,4 +5,32 @@ icon: support
 language: ca
 ---
 
-<p>Properament...</p>
+  {% macro video_player(video_id, title) %}
+  <div class="video-player">
+    <div>{{ title }}</div>
+    <iframe 
+      src="https://www.youtube.com/embed/{{ video_id }}?modestbranding=1"
+      title="{{ title }}"
+      frameborder="0" 
+      style="width:100%;height:100%"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen>
+    </iframe>
+  </div>
+  {% endmacro %}
+
+  <div class="videos">
+    {{ video_player("WTdsrDGMsKo", "Explorador de fitxers") }}
+
+    {{ video_player("PXCVljhXQQc", "Accés al disc local") }}
+
+    {{ video_player("rTY5F6jv7tg", "Nova escena i opcions") }}
+
+    {{ video_player("u3Dhd9JeuXs", "Seleccionar, orbitar, volar") }}
+
+    {{ video_player("xWkukAaIjq0", "Enquadrar, centrar, focalitzar") }}
+
+    {{ video_player("KQGJ9l5C5lw", "Mostrar i ocultar") }}
+
+    {{ video_player("69MN-5MMMJs", "Transformar objectes") }}
+  </div>

src/en/user_guides.njk

@@ -5,4 +5,32 @@ icon: support
 language: en
 ---
 
-<p>Coming soon...</p>
+  {% macro video_player(video_id, title) %}
+  <div class="video-player">
+    <div>{{ title }}</div>
+    <iframe 
+      src="https://www.youtube.com/embed/{{ video_id }}?modestbranding=1"
+      title="{{ title }}"
+      frameborder="0" 
+      style="width:100%;height:100%"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen>
+    </iframe>
+  </div>
+  {% endmacro %}
+
+  <div class="videos">
+    {{ video_player("WTdsrDGMsKo", "File explorer") }}
+
+    {{ video_player("PXCVljhXQQc", "Access to local disk") }}
+
+    {{ video_player("rTY5F6jv7tg", "New scene and options") }}
+
+    {{ video_player("u3Dhd9JeuXs", "Select, orbit, fly") }}
+
+    {{ video_player("xWkukAaIjq0", "Zoom all, center, focus") }}
+
+    {{ video_player("KQGJ9l5C5lw", "Show and hide") }}
+
+    {{ video_player("69MN-5MMMJs", "Transform objects") }}
+  </div>

src/es/user_guides.njk

@@ -5,4 +5,32 @@ icon: support
 language: es
 ---
 
-<p>Próximamente...</p>
+  {% macro video_player(video_id, title) %}
+  <div class="video-player">
+    <div>{{ title }}</div>
+    <iframe 
+      src="https://www.youtube.com/embed/{{ video_id }}?modestbranding=1"
+      title="{{ title }}"
+      frameborder="0" 
+      style="width:100%;height:100%"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen>
+    </iframe>
+  </div>
+  {% endmacro %}
+
+  <div class="videos">
+    {{ video_player("WTdsrDGMsKo", "Explorador de ficheros") }}
+
+    {{ video_player("Rz-iAeWdPXk", "Acceso al disco local") }}
+
+    {{ video_player("I4vAbrI-FQE", "Nueva escena y opciones") }}
+
+    {{ video_player("ZwWEr2bJ-Rw", "Seleccionar, orbitar, volar") }}
+
+    {{ video_player("AXu6LaI7bcA", "Encuadrar, centrar, focalizar") }}
+
+    {{ video_player("pkKX4lwfqSA", "Mostrar y ocultar") }}
+
+    {{ video_player("n9MfX4njUMU", "Transformar objetos") }}
+  </div>