diff --git a/_includes/audio.html b/_includes/audio.html
new file mode 100644
index 0000000..14c7801
--- /dev/null
+++ b/_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>
diff --git a/_includes/video.html b/_includes/video.html
new file mode 100644
index 0000000..e56e054
--- /dev/null
+++ b/_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>
diff --git a/_posts/2023-04-24-videos.md b/_posts/2023-04-24-videos.md
new file mode 100644
index 0000000..747876a
--- /dev/null
+++ b/_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>
\ No newline at end of file
diff --git a/_posts/2023-04-25-audios.md b/_posts/2023-04-25-audios.md
new file mode 100644
index 0000000..8feb768
--- /dev/null
+++ b/_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>
diff --git a/assets/audio/epicaly-short-113909.mp3 b/assets/audio/epicaly-short-113909.mp3
new file mode 100644
index 0000000..5fd64b9
Binary files /dev/null and b/assets/audio/epicaly-short-113909.mp3 differ
diff --git a/assets/video/pexels-engin-akyurt-6069112-960x540-30fps.mp4 b/assets/video/pexels-engin-akyurt-6069112-960x540-30fps.mp4
new file mode 100644
index 0000000..c4c55d7
Binary files /dev/null and b/assets/video/pexels-engin-akyurt-6069112-960x540-30fps.mp4 differ