diff --git a/src/lib/UI/Media.svelte b/src/lib/UI/Media.svelte
new file mode 100644
index 0000000000..2327b5bb1b
--- /dev/null
+++ b/src/lib/UI/Media.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    export let src: string;
+    export let alt = '';
+    export let controls = true;
+    export let autoplay = false;
+    let className = '';
+    export { className as class };
+
+    const videoExtensions = ['mp4', 'webm', 'ogg'] as const;
+    $: isVideo = videoExtensions.some((ext) => src.endsWith(ext));
+</script>
+
+{#if isVideo}
+    <!-- svelte-ignore a11y-media-has-caption-->
+    <video {src} class={className} {controls} {autoplay}>
+        <slot />
+    </video>
+{:else}
+    <img {src} {alt} class={className} />
+{/if}
diff --git a/src/lib/UI/index.ts b/src/lib/UI/index.ts
index e3fbcb6b21..ec5c08c6e9 100644
--- a/src/lib/UI/index.ts
+++ b/src/lib/UI/index.ts
@@ -1 +1,2 @@
 export { default as Tabs } from './Tabs/index.svelte';
+export { default as Media } from './Media.svelte';
diff --git a/src/lib/components/Article.svelte b/src/lib/components/Article.svelte
index 94d662879c..3d6e0d9da2 100644
--- a/src/lib/components/Article.svelte
+++ b/src/lib/components/Article.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import Media from '$lib/UI/Media.svelte';
     import { formatDate } from '$lib/utils/date';
 
     export let title: string;
@@ -13,7 +14,13 @@
 <li>
     <a class="aw-grid-articles-item is-transparent" {href}>
         <div class="aw-grid-articles-item-image">
-            <img src={cover} class="aw-u-media-ratio-16-9" alt={title} />
+            <Media
+                src={cover}
+                class="aw-u-media-ratio-16-9"
+                alt={title}
+                autoplay
+                controls={false}
+            />
         </div>
         <div class="aw-grid-articles-item-content">
             <h4 class="aw-label aw-u-color-text-primary">
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index 1aa9f9a6d2..994e4d758f 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
+    import { Media } from '$lib/UI';
+    import { scroll } from '$lib/animations';
     import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
     import { Main } from '$lib/layouts';
     import { formatDate } from '$lib/utils/date';
-    import { getContext } from 'svelte';
-    import { scroll } from '$lib/animations';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
     import type { AuthorData, CategoryData, PostsData } from '$routes/blog/content';
     import { BLOG_TITLE_SUFFIX } from '$routes/titles';
+    import { getContext } from 'svelte';
 
     export let title: string;
     export let description: string;
@@ -64,7 +65,10 @@
                     <div class="aw-container" style="--container-size:42.5rem">
                         <article class="aw-main-article">
                             <header class="aw-main-article-header">
-                                <a class="aw-link aw-u-color-text-secondary u-cross-baseline" href="/blog">
+                                <a
+                                    class="aw-link aw-u-color-text-secondary u-cross-baseline"
+                                    href="/blog"
+                                >
                                     <span class="aw-icon-chevron-left" aria-hidden="true" />
                                     <span>Back to blog</span>
                                 </a>
@@ -150,7 +154,7 @@
                             </header>
                             {#if cover}
                                 <div class="aw-media-container">
-                                    <img class="u-block" src={cover} alt="" />
+                                    <Media class="u-block" src={cover} />
                                 </div>
                             {/if}
 
@@ -195,9 +199,7 @@
                 </section>
             </div>
         </div>
-        <div
-                class="aw-big-padding-section-level-2 u-position-relative u-overflow-hidden"
-        >
+        <div class="aw-big-padding-section-level-2 u-position-relative u-overflow-hidden">
             <div class="aw-container">
                 <Newsletter />
                 <FooterNav />