From cc91980e2a0475d2002bb7dfc8c5c65c0538d1b7 Mon Sep 17 00:00:00 2001
From: Jieiku <106644+Jieiku@users.noreply.github.com>
Date: Sun, 25 Aug 2024 02:21:07 -0700
Subject: [PATCH] Update Media Shortcodes

---
 content/overview-rich-content/index.fr.md | 87 ++++++++++++++------
 content/overview-rich-content/index.md    | 98 +++++++++++++++--------
 sass/abridge.scss                         |  2 +-
 templates/shortcodes/audio.html           | 30 ++++++-
 templates/shortcodes/gif.html             | 32 ++++++--
 templates/shortcodes/image.html           | 66 +++++++++++++--
 templates/shortcodes/video.html           |  8 +-
 7 files changed, 245 insertions(+), 78 deletions(-)

diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md
index 9c2047fa..d8aae27d 100644
--- a/content/overview-rich-content/index.fr.md
+++ b/content/overview-rich-content/index.fr.md
@@ -12,31 +12,29 @@ toc = true
 series = "Features"
 +++
 
-Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark (avec l'aimable autorisation du [theme d3c3nt](https://d3c3nt.figbert.com/posts/rich-content/)). `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture.
+Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark. `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture.
 
 <!-- more -->
 
 ## Vidéo
 
-Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et renvoie une `<video>` balise. Chaque chaîne du `sources` tableau doit être un chemin vers un fichier vidéo d'un type différent (`webm`, `mp4`, etc). Chaque source individuelle est ensuite convertie en `<source>` balise et l'élément est renvoyé.
-
-- sources sont un tableau de chemins de fichiers vidéo. (obligatoire)
-- class définit une classe pour la vidéo.
-- caption définit le texte de la légende sous la vidéo.
-- w définit la largeur de la vidéo.
-- h définit la hauteur de la vidéo.
-- autoplay lorsqu'il est défini sur "true", lit automatiquement la vidéo au chargement.
-- loop lorsqu'il est défini sur "true", lit la vidéo en boucle.
-- muted lorsqu'il est défini sur "true", règle le son initialement coupé.
+- `sources` sont un tableau de chemins de fichiers vidéo. (obligatoire)
+- `class` définit une classe pour la vidéo.
+- `caption` définit le texte de la légende sous la vidéo.
+- `w` définit la largeur de la vidéo.
+- `h` définit la hauteur de la vidéo.
+- `autoplay` lorsqu'il est défini sur "true", lit automatiquement la vidéo au chargement.
+- `loop` lorsqu'il est défini sur "true", lit la vidéo en boucle.
+- `muted` lorsqu'il est défini sur "true", règle le son initialement coupé.
 
 ** les sources peuvent être le même chemin, un chemin relatif ou un chemin racine, comme le [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
 
-Cours optionnels:
+**Cours optionnels:**
 
-- ci peut être utilisé pour centrer l'image.
-- fr peut être utilisé pour faire flotter l'image à droite.
-- fl peut être utilisé pour faire flotter l'image vers la gauche.
-- b1 peut être utilisé pour ajouter une bordure de 1px.
+- `ci` peut être utilisé pour centrer l'image.
+- `fr` peut être utilisé pour faire flotter l'image à droite.
+- `fl` peut être utilisé pour faire flotter l'image vers la gauche.
+- `b1` peut être utilisé pour ajouter une bordure de 1px.
 
 ### Usage
 ```rs
@@ -60,25 +58,40 @@ Cours optionnels:
 
 ## Image
 
-Le `image` shortcode renvoie une `<picture>` balise et accepte trois paramètres : `sources` (un tableau de chaînes), `fallback_path`, et `fallback_alt` (les deux chaînes).
+Le shortcode `image` renvoie une balise `<picture>` avec plusieurs sources.
+
+Chaque chaîne du tableau `sources` doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc.).
+ La dernière image du tableau `sources` est utilisée pour créer une balise `<img>` sur laquelle le navigateur pourra s'appuyer si les autres formats ne sont pas encore pris en charge.
+
+- `sources` sont un tableau de chemins de fichiers image. (obligatoire)
+- `class` définit une classe pour l'image.
+- `caption` définit le texte de la légende sous l'image.
+- `w` définit la largeur de l'image.
+- `h` définit la hauteur de l'image.
+
+** les sources peuvent être le même chemin, un chemin relatif ou un chemin racine, comme le [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
 
-Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc). `fpath` et
-`falt` sont utilisés pour créer une `<img>` balise sur laquelle le navigateur peut se replier si les autres formats ne sont pas encore pris en charge, fw et fh définissent la largeur et la hauteur de la solution de repli
+**Cours optionnels:**
+
+- `ci` peut être utilisé pour centrer l'image.
+- `fr` peut être utilisé pour faire flotter l'image à droite.
+- `fl` peut être utilisé pour faire flotter l'image vers la gauche.
+- `b1` peut être utilisé pour ajouter une bordure de 1px.
 
 ### Usage
 ```rs
-{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") */}}
 ```
 ### Sortir
 ```html
-{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") }}
 ```
-{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") }}
 
 ## GIF
 
-Le `gif` shortcode est exactement le même que le [shortcode vidéo][#video]
-– il prend un tableau de chaînes appelées `sources` et renvoie une `<video>` balise. La seule différence réside dans la balise la plus à l'extérieur, qui a quatre propriétés supplémentaires : `autoplay`, `loop`, `muted`, `playsinline`.
+Le `gif` shortcode est exactement le même que le [shortcode vidéo][#video].
+ La seule différence est qu'il possède automatiquement les propriétés supplémentaires: `autoplay`, `loop`, `muted`, `playsinline`.
 
 L'utilisation de la `<video>` balise à la place des gifs permet de réduire la taille des fichiers, ce qui est particulièrement important dans les régions où Internet est plus lent ou moins fiable.
 
@@ -96,6 +109,22 @@ L'utilisation de la `<video>` balise à la place des gifs permet de réduire la
 
 Le `audio` shortcode prend un `sources` tableau de chaînes et renvoie une `<audio>` balise. Chaque chaîne du `sources` tableau doit être un chemin vers un fichier audio d'un type différent (`ogg`, `mp3`, `flac`, `wav`, etc). Le navigateur jouera le premier type qu'il prend en charge, donc les placer dans l'ordre de la taille la plus petite à la plus grande utilisera le moins de bande passante si tel est votre objectif.
 
+- `sources` est un tableau de chemins de fichiers. (obligatoire)
+- `class` définit une classe pour l'audio.
+- `caption` définit le texte de la légende sous l'audio.
+- `autoplay` lorsqu'il est défini, lit automatiquement l'audio au chargement.
+- `loop` lorsqu'il est défini, lit l'audio en boucle.
+- `muted` lorsqu'il est défini, définit le son initialement coupé.
+
+** les sources peuvent être le même chemin, un chemin relatif ou un chemin racine, comme le [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
+
+**Cours optionnels:**
+
+- `ci` peut être utilisé pour centrer l'image.
+- `fr` peut être utilisé pour faire flotter l'image à droite.
+- `fl` peut être utilisé pour faire flotter l'image vers la gauche.
+- `b1` peut être utilisé pour ajouter une bordure de 1px.
+
 ### Usage
 ```rs
 {{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
@@ -105,3 +134,13 @@ Le `audio` shortcode prend un `sources` tableau de chaînes et renvoie une `<aud
 {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
 ```
 {{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}
+
+### Usage
+```rs
+{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") */}}
+```
+### Sortir
+```html
+{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
+```
+{{ audio(sources=["over9000.ogg", "over9000.mp3"] class="ci b1" caption="It's Over 9000!!") }}
diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md
index 89bbcb4f..9b11fb59 100644
--- a/content/overview-rich-content/index.md
+++ b/content/overview-rich-content/index.md
@@ -12,35 +12,30 @@ toc = true
 series = "Features"
 +++
 
-Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)). `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing.
+Several custom shortcodes are included to augment CommonMark. `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing.
 
 <!-- more -->
 
 ## Video
 
-The `video` shortcode takes a `sources` parameter (an array of strings)
-and returns a `<video>` tag. Each string in the `sources` array should
-be a path to a video file of a different type (`webm`, `mp4`, etc). Each
-individual source is then converted into a `<source>` tag, and the
-element is returned.
-
-- sources is an array of video file paths. (mandatory)
-- class sets a class for the video.
-- caption sets the caption text below the video.
-- w sets the width of the video.
-- h sets the height of the video.
-- autoplay when set to "true", autoplays the video on load.
-- loop when set to "true", plays the video on a loop.
-- muted when set to "true", sets the audio muted initially.
+- `sources` is an array of video file paths. (mandatory)
+- `class` sets a class for the video.
+- `caption` sets the caption text below the video.
+- `w` sets the width of the video.
+- `h` sets the height of the video.
+- `autoplay` when set, autoplays the video on load.
+- `loop` when set, plays the video on a loop.
+- `muted` when set, sets the audio muted initially.
+- `playsinline` when set, plays the video embeded instead of fullscreen on mobile browsers.
 
 ** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
 
-Optional Classes:
+**Optional Classes:**
 
-- ci can be used to center the image.
-- fr can be used to float the image right.
-- fl can be used to float the image left.
-- b1 can be used to add a 1px border.
+- `ci` can be used to center the image.
+- `fr` can be used to float the image right.
+- `fl` can be used to float the image left.
+- `b1` can be used to add a 1px border.
 
 ### Usage
 ```rs
@@ -64,31 +59,40 @@ Optional Classes:
 
 ## Image
 
-The `image` shortcode returns a `<picture>` tag and accepts three
-parameters: `sources` (an array of strings), `fallback_path`, and
-`fallback_alt` (both strings).
+The `image` shortcode returns a `<picture>` tag with multiple sources.
 
-Each string in the `sources` array should be a path to an image file of
-a different type (`avif`, `webp`, `png`, `jpg`, etc). `fpath` and
-`falt` are used to create an `<img>` tag for the browser to fall
-back on if the other formats aren't yet supported, fw and fh set the width and height of the fallback
+Each string in the `sources` array should be a path to an image file of a different type (`avif`, `webp`, `png`, `jpg`, etc).
+ The last image in the `sources` array is used to create an `<img>` tag for the browser to fall back on if the other formats are not yet supported.
+
+- `sources` is an array of image file paths. (mandatory)
+- `class` sets a class for the image.
+- `caption` sets the caption text below the image.
+- `w` sets the width of the image.
+- `h` sets the height of the image.
+
+** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
+
+**Optional Classes:**
+
+- `ci` can be used to center the image.
+- `fr` can be used to float the image right.
+- `fl` can be used to float the image left.
+- `b1` can be used to add a 1px border.
 
 ### Usage
 ```rs
-{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") */}}
 ```
 ### Output
 ```html
-{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") }}
 ```
-{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"], w=640, h=480, alt="ITS OVER 9000!") }}
 
 ## GIF
 
-The `gif` shortcode is exactly the same as the [video shortcode](#video)
-– it takes an array of strings called `sources` and returns a
-`<video>` tag. The only difference is in the outermost tag, which has
-four additional properties: `autoplay`, `loop`, `muted`, `playsinline`.
+The `gif` shortcode is exactly the same as the [video shortcode](#video).
+ The only difference is it automatically has the additional properties: `autoplay`, `loop`, `muted`, `playsinline`.
 
 Using the `<video>` tag in place of gifs allows for reduced file sizes,
 which is especially important in regions where internet is slower or
@@ -111,6 +115,22 @@ The `audio` shortcode takes a `sources` array of strings and returns an
 audio file of a different type (`ogg`, `mp3`, `flac`, `wav`, etc).
 The browser will play the first type it supports, so placing them in order of size smallest to largest will use the least bandwidth if that is your goal.
 
+- `sources` is an array of file paths. (mandatory)
+- `class` sets a class for the audio.
+- `caption` sets the caption text below the audio.
+- `autoplay` when set, autoplays the audio on load.
+- `loop` when set, plays the audio on a loop.
+- `muted` when set, sets the audio muted initially.
+
+** sources can be same path, relative path, or root path, like the [img shortcode](https://abridge.pages.dev/overview-images/#img-shortcode) **
+
+**Optional Classes:**
+
+- `ci` can be used to center the image.
+- `fr` can be used to float the image right.
+- `fl` can be used to float the image left.
+- `b1` can be used to add a 1px border.
+
 ### Usage
 ```rs
 {{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
@@ -120,3 +140,13 @@ The browser will play the first type it supports, so placing them in order of si
 {{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
 ```
 {{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}
+
+### Usage
+```rs
+{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") */}}
+```
+### Output
+```html
+{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"] muted="true" class="ci b1" caption="It's Over 9000!!") }}
+```
+{{ audio(sources=["over9000.ogg", "over9000.mp3"] class="ci b1" caption="It's Over 9000!!") }}
diff --git a/sass/abridge.scss b/sass/abridge.scss
index 3709b92f..6812bf08 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -1437,7 +1437,7 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   .tpad {padding-top: var(--s1)}
   .b {font-weight: var(--fh)}
   .b1 {
-    video,img {
+    video,audio,picture,img {
       border: 1px solid var(--c4);
     }
   }
diff --git a/templates/shortcodes/audio.html b/templates/shortcodes/audio.html
index 2dbce685..2d6eda9d 100644
--- a/templates/shortcodes/audio.html
+++ b/templates/shortcodes/audio.html
@@ -1,7 +1,29 @@
-<audio controls>
-  {% for source in sources -%}
-    {% set type = source | split(pat=".") | last -%}
-    <source src="{{ config.base_url | safe }}{{ page.path | safe }}{{ source | safe }}" type="{{ 'audio/' ~ type }}" />
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
+<audio controls{% if class %} class="{{class}}"{% endif %}{% if autoplay %} autoplay{% endif %}{% if loop %} loop{% endif %}{% if muted %} muted{% endif %}{% if playsinline %} playsinline{% endif %}>
+  {% for src in sources -%}
+
+  {%- set file = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start_matches(pat="./") %}
+  {%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page.path %}{%- set pagepath = page.path %}{%- elif section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with("./") and reldir %}{# Relative Path #}
+    {%- set path = src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+    {%- set path = path ~ "/" %}
+
+  {%- elif src is starting_with("/") %}{# Root Path #}
+    {%- set rootpath = src | split(pat="/") | slice(end=-1) | join(sep="/") %}
+    {%- set path = config.base_url ~ rootpath ~ "/"  %}
+
+  {%- else %}{# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last -%}
+  {%- if type is matching("^mov$") %}{% set type = "quicktime" %}{% endif -%}
+  <source src="{{ path | safe }}{{ file | safe }}" type="{{ 'audio/' ~ type }}" />
   {% endfor -%}
   Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
 </audio>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif -%}
diff --git a/templates/shortcodes/gif.html b/templates/shortcodes/gif.html
index a49a8795..430ba89e 100644
--- a/templates/shortcodes/gif.html
+++ b/templates/shortcodes/gif.html
@@ -1,7 +1,29 @@
-<video autoplay loop muted playsinline>
-  {% for source in sources -%}
-    {% set type = source | split(pat=".") | last -%}
-    <source src="{{ config.base_url | safe }}{{ page.path | safe }}{{ source | safe }}" type="{{ 'video/' ~ type }}" />
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
+<video controls{% if class %} class="{{class}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} autoplay loop muted playsinline>
+  {% for src in sources -%}
+
+  {%- set video = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start_matches(pat="./") %}
+  {%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page.path %}{%- set pagepath = page.path %}{%- elif section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with("./") and reldir %}{# Relative Path #}
+    {%- set path = src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+    {%- set path = path ~ "/" %}
+
+  {%- elif src is starting_with("/") %}{# Root Path #}
+    {%- set rootpath = src | split(pat="/") | slice(end=-1) | join(sep="/") %}
+    {%- set path = config.base_url ~ rootpath ~ "/"  %}
+
+  {%- else %}{# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last -%}
+  {%- if type is matching("^mov$") %}{% set type = "quicktime" %}{% endif -%}
+  <source src="{{ path | safe }}{{ video | safe }}" type="{{ 'video/' ~ type }}" />
   {% endfor -%}
-  Your browser doesn't support the video tag, which I use in place of .gifs, and/or the video formats in use here – sorry!
+  Your browser doesn't support the video tag and/or the video formats in use here – sorry!
 </video>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif -%}
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index 4f9d3de3..22b8f2df 100644
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@@ -1,7 +1,61 @@
-<picture>
-  {% for source in sources -%}
-    {% set type = source | split(pat=".") | last -%}
-    <source srcset="{{ config.base_url | safe}}{{ page.path | safe }}{{ source | safe }}" type="{{ 'img/' ~ type }}" />
-  {% endfor -%}
-  <img src="{{ fpath }}" alt="{{ falt | default(value='Image') }}"{% if fw %} width="{{fw}}"{% endif %}{% if fh %} height="{{fh}}"{% endif %} loading="lazy" />
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
+<picture{% if class %} class="{{class}}"{% endif %}>
+  {%- for src in sources %}
+
+  {%- set video = src | split(pat="/") | last %}
+  {%- set dirtest = src | trim_start_matches(pat="./") %}
+  {%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
+  {%- if page.path %}{%- set pagepath = page.path %}{%- elif section.path %}{%- set pagepath = section.path %}{%- endif %}
+
+  {%- if src is starting_with("./") and reldir %}{# Relative Path #}
+    {%- set path = src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+    {%- set path = path ~ "/" %}
+    {%- if not w or not h %}
+      {%- if lang != config.default_language %}
+        {%- set metapath = pagepath ~ path ~ video | replace(from=pagepath | truncate(length=4, end=""), to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ path ~ video %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- elif src is starting_with("/") %}{# Root Path #}
+    {%- set rootpath = src | split(pat="/") | slice(end=-1) | join(sep="/") %}
+    {%- set path = config.base_url ~ rootpath ~ "/"  %}
+    {%- if not w or not h %}
+      {%- set metapath = rootpath ~ "/" ~ video %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- else %}{# Same Directory Path #}
+    {%- set path = "" %}
+    {%- if not w or not h %}
+      {%- if lang != config.default_language %}
+        {%- set metapath = pagepath ~ video | replace(from=pagepath | truncate(length=4, end=""), to="/") %}
+      {%- else %}
+        {%- set metapath = pagepath ~ video %}
+      {%- endif %}
+      {%- set meta = get_image_metadata(path=metapath) %}
+      {%- set w = meta.width %}
+      {%- set h = meta.height %}
+    {%- endif %}
+
+  {%- endif %}
+
+  {%- set type = src | split(pat=".") | last -%}
+  {%- if type is matching("^mov$") %}{%- set type = "quicktime" -%}{% endif -%}
+  {%- if loop.last %}
+  {%- if not alt %}
+    {%- set alt = video | split(pat=".") | first %}
+  {%- endif %}
+  <img src="{{ path | safe }}{{ video | safe }}" alt="{{ alt }}"{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
+  {%- else %}
+  <source srcset="{{ path | safe }}{{ video | safe }}" type="{{ 'image/' ~ type }}" />
+  {%- endif %}
+  {%- endfor %}
 </picture>
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{% endif -%}
diff --git a/templates/shortcodes/video.html b/templates/shortcodes/video.html
index 18393763..9d33f28d 100644
--- a/templates/shortcodes/video.html
+++ b/templates/shortcodes/video.html
@@ -1,5 +1,5 @@
 {%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
-<video controls{% if class %} class="{{class}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %}{% if autoplay %} autoplay{% endif %}{% if loop %} loop=true{% endif %}{% if muted %} muted=true{% endif %}>
+<video controls{% if class %} class="{{class}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %}{% if autoplay %} autoplay{% endif %}{% if loop %} loop{% endif %}{% if muted %} muted{% endif %}{% if playsinline %} playsinline{% endif %}>
   {% for src in sources -%}
 
   {%- set video = src | split(pat="/") | last %}
@@ -7,15 +7,15 @@
   {%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
   {%- if page.path %}{%- set pagepath = page.path %}{%- elif section.path %}{%- set pagepath = section.path %}{%- endif %}
 
-  {%- if src is starting_with("./") and reldir %} {# Relative Path #}
+  {%- if src is starting_with("./") and reldir %}{# Relative Path #}
     {%- set path = src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
     {%- set path = path ~ "/" %}
 
-  {%- elif src is starting_with("/") %} {# Root Path #}
+  {%- elif src is starting_with("/") %}{# Root Path #}
     {%- set rootpath = src | split(pat="/") | slice(end=-1) | join(sep="/") %}
     {%- set path = config.base_url ~ rootpath ~ "/"  %}
 
-  {%- else %} {# Same Directory Path #}
+  {%- else %}{# Same Directory Path #}
     {%- set path = "" %}
 
   {%- endif %}