Audio and Video support (alshedivat#1367)

Since alshedivat#1253 has been hanging there for a while, I decided to part from
it and add audio and video support.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>

_includes/audio.html

@@ -0,0 +1,16 @@
+<figure>
+
+  <audio
+    src="{{ include.path | relative_url }}"
+    {% if include.class %}class="{{ include.class }}"{% endif %}
+    {% if include.alt %}alt="{{ include.alt }}"{% endif %}
+    {% if include.title %}title="{{ include.title }}"{% endif %}
+    {% if include.autoplay %}autoplay{% endif %}
+    {% if include.controls %}controls{% endif %}
+    {% if include.loop %}loop{% endif %}
+    {% if include.muted %}muted{% endif %}
+  />
+
+  {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}
+
+</figure>

_includes/video.html

@@ -0,0 +1,47 @@
+{% assign extension = include.path | split:'.' | last %}
+
+<figure>
+
+  {% if extension == "mp4" or extension == "webm" or extension == "ogg" %}
+
+  <video
+    src="{{ include.path | relative_url }}"
+    {% if include.class %}class="{{ include.class }}"{% endif %}
+    {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %}
+    {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
+    {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
+    {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}
+    {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %}
+    {% if include.max-height %}height="{{ include.max-height }}"{% endif %}
+    {% if include.title %}title="{{ include.title }}"{% endif %}
+    {% if include.alt %}alt="{{ include.alt }}"{% endif %}
+    {% if include.autoplay %}autoplay{% endif %}
+    {% if include.controls %}controls{% endif %}
+    {% if include.loop %}loop{% endif %}
+    {% if include.muted %}muted{% endif %}
+    {% if include.poster %}poster="{{ include.poster }}"{% endif %}
+  />
+
+  {% else %}
+
+  <iframe
+    src="{{ include.path }}"
+    {% if include.class %}class="{{ include.class }}"{% endif %}
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+    {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %}
+    {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
+    {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
+    {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}
+    {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %}
+    {% if include.max-height %}height="{{ include.max-height }}"{% endif %}
+    {% if include.alt %}alt="{{ include.alt }}"{% endif %}
+    {% if include.title %}title="{{ include.title }}"{% endif %}
+  />
+
+  {% endif %}
+
+  {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}
+
+</figure>

_posts/2023-04-24-videos.md

@@ -0,0 +1,32 @@
+---
+layout: post
+title:  a post with videos
+date: 2023-04-24 21:01:00
+description: this is what included videos could look like
+tags: including videos
+categories: sample-posts
+---
+This is an example post with videos. It supports local video files.
+
+<div class="row mt-3">
+    <div class="col-sm mt-3 mt-md-0">
+        {% include video.html path="assets/video/pexels-engin-akyurt-6069112-960x540-30fps.mp4" class="img-fluid rounded z-depth-1" controls=true autoplay=true %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% include video.html path="assets/video/pexels-engin-akyurt-6069112-960x540-30fps.mp4" class="img-fluid rounded z-depth-1" controls=true %}
+    </div>
+</div>
+<div class="caption">
+    A simple, elegant caption looks good between video rows, after each row, or doesn't have to be there at all.
+</div>
+
+It does also support embedding videos from different sources. Here are some examples:
+
+<div class="row mt-3">
+    <div class="col-sm mt-3 mt-md-0">
+        {% include video.html path="https://www.youtube.com/embed/jNQXAC9IVRw" class="img-fluid rounded z-depth-1" %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% include video.html path="https://player.vimeo.com/video/524933864?h=1ac4fd9fb4&title=0&byline=0&portrait=0" class="img-fluid rounded z-depth-1" %}
+    </div>
+</div>

_posts/2023-04-25-audios.md

@@ -0,0 +1,21 @@
+---
+layout: post
+title:  a post with audios
+date: 2023-04-25 10:25:00
+description: this is what included audios could look like
+tags: including audios
+categories: sample-posts
+---
+This is an example post with audios. It supports local audio files.
+
+<div class="row mt-3">
+    <div class="col-sm mt-3 mt-md-0">
+        {% include audio.html path="assets/audio/epicaly-short-113909.mp3" controls=true %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% include audio.html path="https://cdn.pixabay.com/download/audio/2022/06/25/audio_69a61cd6d6.mp3" controls=true %}
+    </div>
+</div>
+<div class="caption">
+    A simple, elegant caption looks good between video rows, after each row, or doesn't have to be there at all.
+</div>