From b984afbe640f89563f75d8ca1f6dbe1e16c044bb Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Mon, 14 Sep 2026 15:37:14 -0700
Subject: [PATCH] Render direct video files in a video element

---
 .../components/fieldtypes/VideoFieldtype.vue  |  8 ++++-
 .../fieldtypes/VideoFieldtype.test.js         | 30 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 5282a8b1a3a..adcd2cac3d3 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -14,8 +14,14 @@
             />
         </ui-input-group>
         <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
+        <video
+            v-if="shouldShowPreview && isVideo"
+            :src="isVisible ? embedUrl : null"
+            controls
+            class="aspect-video rounded-lg w-full"
+        ></video>
         <iframe
-            v-if="shouldShowPreview"
+            v-else-if="shouldShowPreview"
             ref="iframe"
             :src="isVisible ? embedUrl : null"
             frameborder="0"
diff --git a/resources/js/tests/components/fieldtypes/VideoFieldtype.test.js b/resources/js/tests/components/fieldtypes/VideoFieldtype.test.js
index 241092cdd86..39c68b34f0b 100644
--- a/resources/js/tests/components/fieldtypes/VideoFieldtype.test.js
+++ b/resources/js/tests/components/fieldtypes/VideoFieldtype.test.js
@@ -5,10 +5,15 @@ import { publishContextKey } from '@/components/ui';
 
 window.__ = (key) => key;
 
+let intersect;
+
 beforeEach(() => {
     vi.useFakeTimers();
 
     window.IntersectionObserver = class {
+        constructor(callback) {
+            intersect = () => callback([{ isIntersecting: true, intersectionRatio: 1 }]);
+        }
         observe() {}
         disconnect() {}
     };
@@ -60,3 +65,28 @@ test('it debounces updates while typing', async () => {
     expect(wrapper.emitted('update:value')).toHaveLength(1);
     expect(wrapper.emitted('update:value')[0]).toEqual(['https://www.youtube.com/watch?v=123']);
 });
+
+test('it renders a direct video file in a video element', async () => {
+    const wrapper = mountVideoField({ value: 'https://example.com/clip.mp4' });
+    intersect();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('video').attributes('src')).toBe('https://example.com/clip.mp4');
+    expect(wrapper.find('video').attributes('controls')).toBeDefined();
+    expect(wrapper.find('iframe').exists()).toBe(false);
+});
+
+test('it renders an embeddable url in an iframe', async () => {
+    const wrapper = mountVideoField({ value: 'https://www.youtube.com/watch?v=1234' });
+    intersect();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('iframe').exists()).toBe(true);
+    expect(wrapper.find('video').exists()).toBe(false);
+});
+
+test('it does not load the preview until the field is visible', () => {
+    const wrapper = mountVideoField({ value: 'https://example.com/clip.mp4' });
+
+    expect(wrapper.find('video').attributes('src')).toBeUndefined();
+});