diff --git a/config/rapidez/models.php b/config/rapidez/models.php
index 864efc62c..d1575a9dc 100644
--- a/config/rapidez/models.php
+++ b/config/rapidez/models.php
@@ -15,6 +15,7 @@
     'option_value'              => Rapidez\Core\Models\OptionValue::class,
     'product_image'             => Rapidez\Core\Models\ProductImage::class,
     'product_image_value'       => Rapidez\Core\Models\ProductImageValue::class,
+    'product_video_value'       => Rapidez\Core\Models\ProductVideoValue::class,
     'product_link'              => Rapidez\Core\Models\ProductLink::class,
     'product_view'              => Rapidez\Core\Models\ProductView::class,
     'product_option'            => Rapidez\Core\Models\ProductOption::class,
diff --git a/resources/js/components/Product/Images.vue b/resources/js/components/Product/Images.vue
index 3318c00aa..06152efbe 100644
--- a/resources/js/components/Product/Images.vue
+++ b/resources/js/components/Product/Images.vue
@@ -4,6 +4,7 @@ import { useEventListener } from '@vueuse/core'
 export default {
     data: () => ({
         images: config.product.images,
+        media: config.product.media,
         active: 0,
         zoomed: false,
         touchStartX: 0,
@@ -30,7 +31,8 @@ export default {
                     Object.values(window.config.product.super_attributes).filter((attribute) => attribute.update_image).length
                 ) {
                     self.images = simpleProduct.images
-                    self.active = Math.min(self.active, self.images.length - 1)
+                    self.media = simpleProduct.media
+                    self.active = Math.min(self.active, self.media.length - 1)
                 }
             })
         })
@@ -52,7 +54,7 @@ export default {
             if (e.key == 'ArrowLeft' && this.active > 0) {
                 // left
                 this.active--
-            } else if (e.key == 'ArrowRight' && this.active < this.images.length - 1) {
+            } else if (e.key == 'ArrowRight' && this.active < this.media.length - 1) {
                 // right
                 this.active++
             } else if (e.key == 'Escape') {
@@ -77,7 +79,7 @@ export default {
                 return
             }
 
-            if (distance < 0 && this.active < this.images.length - 1) {
+            if (distance < 0 && this.active < this.media.length - 1) {
                 this.change(this.active + 1)
             } else if (distance > 0 && this.active > 0) {
                 this.change(this.active - 1)
diff --git a/resources/views/product/partials/gallery/popup.blade.php b/resources/views/product/partials/gallery/popup.blade.php
index 1959bbaec..642ff12f1 100644
--- a/resources/views/product/partials/gallery/popup.blade.php
+++ b/resources/views/product/partials/gallery/popup.blade.php
@@ -1,11 +1,23 @@
-<div v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup" v-cloak>
+<div v-if="media.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup" v-cloak>
     <div class="flex flex-1 items-center justify-center" v-on:click.prevent="toggleZoom">
         <img
-            :src="config.media_url + '/catalog/product' + images[active]"
+            v-if="media[active].media_type === 'image'"
+            :src="config.media_url + '/catalog/product' + media[active].image"
             alt="{{ $product->name }}"
             class="object-contain max-h-full mx-auto block"
             loading="lazy"
         />
+        <iframe
+            v-else-if="media[active].media_type === 'external-video'"
+            class="h-[calc(100%-200px)] w-[calc(100%-200px)]"
+            :src="media[active].video_url"
+            allow="autoplay"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            loading="lazy"
+        >
+        </iframe>
         <div class="z-popup-actions pointer-events-none fixed top-3 right-3">
             <x-heroicon-o-x-mark class="size-6" />
         </div>
@@ -13,7 +25,7 @@ class="object-contain max-h-full mx-auto block"
     <button class="z-popup-actions top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
         <x-heroicon-o-chevron-left class="size-8 text-muted" />
     </button>
-    <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
+    <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != media.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
         <x-heroicon-o-chevron-right class="size-8 text-muted" />
     </button>
 </div>
diff --git a/resources/views/product/partials/gallery/slider.blade.php b/resources/views/product/partials/gallery/slider.blade.php
index 018e951a4..32246bd52 100644
--- a/resources/views/product/partials/gallery/slider.blade.php
+++ b/resources/views/product/partials/gallery/slider.blade.php
@@ -1,13 +1,14 @@
-<div class="relative" v-if="images.length">
+<div class="relative" v-if="media.length">
     <a
         v-on:click.prevent="toggleZoom"
-        v-bind:href="config.media_url + '/catalog/product' + images[active]"
+        v-bind:href="config.media_url + '/catalog/product' + media[active].image"
         class="flex h-[440px] cursor-zoom-in items-center justify-center rounded border p-5"
     >
         <img
             {{-- src should always be above v-bind:src --}}
-            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->images).'.webp') }}"
-            v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp' | url"
+            v-if="media[active].media_type === 'image'"
+            v-bind:src="window.url('/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + media[active].image + '.webp')"
+            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->media)['image'].'.webp') }}"
             alt="{{ $product->name }}"
             class="max-h-full object-contain"
             style="view-transition-name: image-{{ $product->sku }}"
@@ -15,13 +16,25 @@ class="max-h-full object-contain"
             width="400"
             height="400"
         />
+        <iframe
+            v-else-if="media[active].media_type === 'external-video'"
+            v-cloak
+            class="h-full w-full"
+            :src="media[active].video_url"
+            allow="autoplay"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            loading="lazy"
+        >
+        </iframe>
     </a>
 
-    @if (count($selectedChild->images ?? []) > 1)
+    @if (count($selectedChild->media ?? []) > 1)
         <button v-if="active" v-on:click="change(active-1)" class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" aria-label="@lang('Prev')" v-cloak>
             <x-heroicon-o-chevron-left class="size-8 text" />
         </button>
-        <button v-if="active != images.length-1" v-on:click="change(active+1)" class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" aria-label="@lang('Next')">
+        <button v-if="active != media.length-1" v-on:click="change(active+1)" class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" aria-label="@lang('Next')">
             <x-heroicon-o-chevron-right class="size-8 text" />
         </button>
     @endif
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index a9595c6b2..f6095914c 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -10,8 +10,8 @@
     @for ($imageId = 0; $imageId < max($breakpoints); $imageId++)
         <button
             @attributes([
-                'v-cloak' => !($imageId < count($selectedChild->images) && count($selectedChild->images) > 1),
-                'v-if' => $imageId . ' < images.length && images.length > 1',
+                'v-cloak' => !($imageId < count($selectedChild->media) && count($selectedChild->media) > 1),
+                'v-if' => $imageId . ' < media.length && media.length > 1',
             ])
             @class([
                 'max-w-24 relative flex aspect-square flex-1 items-center justify-center overflow-hidden rounded border bg-white p-1.5 outline-primary transition-all',
@@ -30,11 +30,14 @@
         >
             <img
                 {{-- src should always be above v-bind:src --}}
-                @if ($imageId < count($selectedChild->images))
-                    src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->images[$imageId].'.webp') }}"
+                @if ($imageId < count($selectedChild->media))
+                    @if ($selectedChild->media[$imageId]['media_type'] === 'external-video')
+                        src="{{ config('rapidez.media_url') }}/catalog/product{{ $selectedChild->media[$imageId]['image'] }}"
+                    @else
+                        src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->media[$imageId]['image'].'.webp') }}"
+                    @endif
                 @endif
-                v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + images[{{ $imageId }}] + '.webp' | url"
-                alt="{{ $product->name }}"
+                v-bind:src="window.url(media[{{ $imageId }}].media_type === 'external-video' ? window.config.media_url + '/catalog/product' + media[{{ $imageId }}].image : '/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + media[{{ $imageId }}].image + '.webp')"                alt="{{ $product->name }}"
                 class="block max-h-full w-auto object-contain"
                 width="80"
                 height="80"
diff --git a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
index 72ca15a8e..65b2e57c9 100644
--- a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
@@ -1,8 +1,8 @@
 {{-- This component shows an overlay on the last shown thumbnail if there are more thumbnails after it. --}}
 
 <div @attributes([
-    'v-cloak' => !(count($selectedChild->images) - $imageId - 1),
-    'v-if' => 'images.length - ' . $imageId . ' - 1',
+    'v-cloak' => !(count($selectedChild->media) - $imageId - 1),
+    'v-if' => 'media.length - ' . $imageId . ' - 1',
 ])>
     <span
         @class([
@@ -17,9 +17,9 @@
     >
         <span
             class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-md"
-            v-text="'+' + (images.length - {{ $imageId }} - 1)"
+            v-text="'+' + (media.length - {{ $imageId }} - 1)"
         >
-            +{{ count($selectedChild->images) - $imageId - 1 }}
+            +{{ count($selectedChild->media) - $imageId - 1 }}
         </span>
     </span>
 </div>
diff --git a/resources/views/product/partials/images.blade.php b/resources/views/product/partials/images.blade.php
index 2b781038c..a9067ac13 100644
--- a/resources/views/product/partials/images.blade.php
+++ b/resources/views/product/partials/images.blade.php
@@ -1,6 +1,6 @@
 <div class="relative flex flex-col flex-1">
     <images>
-        <div class="flex-1" slot-scope="{ images, active, zoomed, toggleZoom, change }">
+        <div class="flex-1" slot-scope="{ images, media, active, zoomed, toggleZoom, change }">
             <div class="sticky top-5 bg-white">
                 @include('rapidez::product.partials.gallery.slider')
                 @include('rapidez::product.partials.gallery.thumbnails')
diff --git a/src/Http/Controllers/ProductController.php b/src/Http/Controllers/ProductController.php
index cc11e2460..98a85b786 100644
--- a/src/Http/Controllers/ProductController.php
+++ b/src/Http/Controllers/ProductController.php
@@ -26,6 +26,7 @@ public function show(int $productId)
             'price',
             'special_price',
             'images',
+            'media',
             'url',
             'min_sale_qty',
             'max_sale_qty',
diff --git a/src/Models/Product.php b/src/Models/Product.php
index 1d1de2a09..5f24b233a 100644
--- a/src/Models/Product.php
+++ b/src/Models/Product.php
@@ -8,6 +8,7 @@
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Database\Eloquent\Relations\HasOneThrough;
+use Illuminate\Support\Str;
 use Rapidez\Core\Casts\Children;
 use Rapidez\Core\Casts\CommaSeparatedToArray;
 use Rapidez\Core\Casts\CommaSeparatedToIntegerArray;
@@ -49,7 +50,7 @@ class Product extends Model
         self::CREATED_AT => 'datetime',
     ];
 
-    protected $appends = ['url'];
+    protected $appends = ['url', 'media'];
 
     protected static function booting(): void
     {
@@ -234,6 +235,19 @@ protected function url(): Attribute
         );
     }
 
+    protected function media(): Attribute
+    {
+        return Attribute::get(
+            fn (): array => $this->gallery->sortBy('productImageValue.position')->map(function (ProductImage $value) {
+                return [
+                    'media_type' => $value->media_type,
+                    'image'      => $value->value,
+                    'video_url'  => isset($value->video) ? Str::embedUrl($value->video->url) : null, // @phpstan-ignore-line
+                ];
+            })->values()->toArray()
+        );
+    }
+
     protected function images(): Attribute
     {
         return Attribute::make(
diff --git a/src/Models/ProductImage.php b/src/Models/ProductImage.php
index 779539ed1..25242a275 100644
--- a/src/Models/ProductImage.php
+++ b/src/Models/ProductImage.php
@@ -11,7 +11,7 @@ class ProductImage extends Model
 
     protected $primaryKey = 'value_id';
 
-    protected $with = ['productImageValue'];
+    protected $with = ['productImageValue', 'video'];
 
     protected static function booted(): void
     {
@@ -31,4 +31,9 @@ public function productImageValue(): BelongsTo
     {
         return $this->belongsTo(config('rapidez.models.product_image_value'), 'value_id', 'value_id');
     }
+
+    public function video(): BelongsTo
+    {
+        return $this->belongsTo(config('rapidez.models.product_video_value'), 'value_id', 'value_id');
+    }
 }
diff --git a/src/Models/ProductVideoValue.php b/src/Models/ProductVideoValue.php
new file mode 100644
index 000000000..66bf8cae5
--- /dev/null
+++ b/src/Models/ProductVideoValue.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace Rapidez\Core\Models;
+
+class ProductVideoValue extends Model
+{
+    protected $table = 'catalog_product_entity_media_gallery_value_video';
+
+    protected $primaryKey = 'value_id';
+}
diff --git a/src/RapidezServiceProvider.php b/src/RapidezServiceProvider.php
index 18000ed0f..f9f67a3c6 100644
--- a/src/RapidezServiceProvider.php
+++ b/src/RapidezServiceProvider.php
@@ -301,6 +301,78 @@ function ($filename) use ($manifest) {
             );
         });
 
+        Str::macro(
+            'embedUrl',
+            function ($url) {
+                if (Str::contains($url, 'vimeo')) {
+                    $url = str_replace('/vimeo.com', '/player.vimeo.com/video', $url);
+
+                    // Handle private vimeo urls.
+                    $hash = null;
+                    if (! Str::contains($url, 'progressive_redirect') && Str::substrCount($url, '/') > 4) {
+                        $hash = Str::afterLast($url, '/');
+                        $url = Str::beforeLast($url, '/');
+
+                        if (Str::contains($hash, '?')) {
+                            $url .= '?' . Str::after($hash, '?');
+                            $hash = Str::before($hash, '?');
+                        }
+                    }
+
+                    $paramsToAdd = '?dnt=1&watch_full_video=false&vimeo_logo=false&speed=false&chromecast=false&byline=false&badge=false&ask_ai=false&airplay=false';
+                    if ($hash) {
+                        $paramsToAdd .= '&h=' . $hash;
+                    }
+
+                    if (Str::contains($url, '?')) {
+                        $url = str_replace('?', $paramsToAdd . '&', $url);
+                    } else {
+                        $url .= $paramsToAdd;
+                    }
+
+                    return $url;
+                }
+
+                if (Str::contains($url, 'youtu.be')) {
+                    $url = str_replace('youtu.be', 'www.youtube.com/embed', $url);
+
+                    // Check for start at point and replace it with correct parameter.
+                    if (Str::contains($url, '?t=')) {
+                        $url = str_replace('?t=', '?start=', $url);
+                    }
+                }
+
+                if (Str::contains($url, 'youtube.com/watch?v=')) {
+                    $url = str_replace('watch?v=', 'embed/', $url);
+
+                    if (Str::contains($url, '&t=')) {
+                        $url = str_replace('&t=', '?start=', $url);
+                    }
+                }
+
+                if (Str::contains($url, 'youtube.com/shorts/')) {
+                    $url = str_replace('shorts/', 'embed/', $url);
+                }
+
+                if (Str::contains($url, 'youtube.com')) {
+                    $url = str_replace('youtube.com', 'youtube-nocookie.com', $url);
+                }
+
+                // This avoids SSL issues when using the non-www version
+                if (Str::contains($url, '//youtube-nocookie.com')) {
+                    $url = str_replace('//youtube-nocookie.com', '//www.youtube-nocookie.com', $url);
+                }
+
+                $url .= '&fs=0';
+
+                if (Str::contains($url, '&') && ! Str::contains($url, '?')) {
+                    $url = Str::replaceFirst('&', '?', $url);
+                }
+
+                return $url;
+            }
+        );
+
         return $this;
     }