From f35b6a182602fac5f23248709125218851c1fee2 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Fri, 13 Jun 2025 15:18:42 -0700
Subject: [PATCH 01/29] video providers

---
 .../components/fieldtypes/VideoFieldtype.vue  | 31 +++++++++++++++++--
 src/Fieldtypes/Video.php                      | 10 ++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index cd38e653e2e..900f1892eba 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -1,5 +1,14 @@
 <template>
-    <div class="flex flex-col space-y-3 p-1.5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-700 rounded-xl">
+    <div
+        class="flex flex-col space-y-3 rounded-xl border border-gray-300 bg-gray-100 p-1.5 dark:border-gray-700 dark:bg-gray-900"
+    >
+        <Select
+            :options="providers"
+            option-label="name"
+            option-value="handle"
+            :placeholder="__('Provider...')"
+            v-model="provider"
+        />
         <ui-input-group>
             <ui-input-group-prepend :text="__('URL')" />
             <ui-input
@@ -24,11 +33,24 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
+import { Select } from '@statamic/ui';
 
 export default {
+    components: { Select },
+
     mixins: [Fieldtype],
 
+    data() {
+        return {
+            provider: null,
+        };
+    },
+
     computed: {
+        providers() {
+            return this.meta;
+        },
+
         shouldShowPreview() {
             return !this.isInvalid && (this.isEmbeddable || this.isVideo);
         },
@@ -40,10 +62,12 @@ export default {
                 embed_url = embed_url.includes('shorts/')
                     ? embed_url.replace('shorts/', 'embed/')
                     : embed_url.replace('watch?v=', 'embed/');
+                this.provider = 'youtube';
             }
 
             if (embed_url.includes('youtu.be')) {
                 embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
+                this.provider = 'youtube';
             }
 
             if (embed_url.includes('vimeo')) {
@@ -53,6 +77,8 @@ export default {
                     let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
                     embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
                 }
+
+                this.provider = 'vimeo';
             }
 
             if (embed_url.includes('&') && !embed_url.includes('?')) {
@@ -81,7 +107,8 @@ export default {
 
         isVideo() {
             const url = this.value || '';
-            const isVideo = url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
+            const isVideo =
+                url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
             return !this.isEmbeddable && isVideo;
         },
     },
diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index c395e5f6882..34671cfefcd 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -8,6 +8,16 @@ class Video extends Fieldtype
 {
     protected $categories = ['media'];
 
+    public function preload()
+    {
+        /** @todo Fetch these from some repository so folks can add their own */
+        return [
+            ['name' => 'Cloudflare Stream', 'handle' => 'cloudflare_stream'],
+            ['name' => 'Vimeo', 'handle' => 'vimeo'],
+            ['name' => 'YouTube', 'handle' => 'youtube'],
+        ];
+    }
+
     protected function configFieldItems(): array
     {
         return [

From e37348934caed3287d2f5a7a5dd6d5056698ecad Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Fri, 13 Jun 2025 21:27:12 -0700
Subject: [PATCH 02/29] move the provider/embed logic to the fieldtype

---
 .../components/fieldtypes/VideoFieldtype.vue  | 48 +++++----------
 routes/cp.php                                 |  2 +
 src/Enums/VideoType.php                       | 11 ++++
 .../Fieldtypes/VideoFieldtypeController.php   | 61 +++++++++++++++++++
 4 files changed, 88 insertions(+), 34 deletions(-)
 create mode 100644 src/Enums/VideoType.php
 create mode 100644 src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 900f1892eba..bec9a42e75b 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -42,52 +42,20 @@ export default {
 
     data() {
         return {
+            embedUrl: null,
             provider: null,
         };
     },
 
     computed: {
         providers() {
-            return this.meta;
+            return this.meta.providers;
         },
 
         shouldShowPreview() {
             return !this.isInvalid && (this.isEmbeddable || this.isVideo);
         },
 
-        embedUrl() {
-            let embed_url = this.value || '';
-
-            if (embed_url.includes('youtube')) {
-                embed_url = embed_url.includes('shorts/')
-                    ? embed_url.replace('shorts/', 'embed/')
-                    : embed_url.replace('watch?v=', 'embed/');
-                this.provider = 'youtube';
-            }
-
-            if (embed_url.includes('youtu.be')) {
-                embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
-                this.provider = 'youtube';
-            }
-
-            if (embed_url.includes('vimeo')) {
-                embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
-
-                if (!this.value.includes('progressive_redirect') && embed_url.split('/').length > 5) {
-                    let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
-                    embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
-                }
-
-                this.provider = 'vimeo';
-            }
-
-            if (embed_url.includes('&') && !embed_url.includes('?')) {
-                embed_url = embed_url.replace('&', '?');
-            }
-
-            return embed_url;
-        },
-
         isEmbeddable() {
             const url = this.value || '';
             const isYoutube = url.includes('youtube') || url.includes('youtu.be');
@@ -112,5 +80,17 @@ export default {
             return !this.isEmbeddable && isVideo;
         },
     },
+
+    watch: {
+        value() {
+            this.$axios
+                .get(this.meta.url, { params: { url: this.value } })
+                .then((response) => response.data)
+                .then((data) => {
+                    this.provider = data.provider;
+                    this.embedUrl = data.embed_url;
+                });
+        },
+    },
 };
 </script>
diff --git a/routes/cp.php b/routes/cp.php
index 72f55b4d336..26a46b40de3 100644
--- a/routes/cp.php
+++ b/routes/cp.php
@@ -57,6 +57,7 @@
 use Statamic\Http\Controllers\CP\Fieldtypes\IconFieldtypeController;
 use Statamic\Http\Controllers\CP\Fieldtypes\MarkdownFieldtypeController;
 use Statamic\Http\Controllers\CP\Fieldtypes\RelationshipFieldtypeController;
+use Statamic\Http\Controllers\CP\Fieldtypes\VideoFieldtypeController;
 use Statamic\Http\Controllers\CP\Forms\ActionController as FormActionController;
 use Statamic\Http\Controllers\CP\Forms\FormBlueprintController;
 use Statamic\Http\Controllers\CP\Forms\FormExportController;
@@ -342,6 +343,7 @@
         Route::post('files/upload', [FilesFieldtypeController::class, 'upload'])->name('files.upload');
         Route::get('dictionaries/{dictionary}', DictionaryFieldtypeController::class)->name('dictionary-fieldtype');
         Route::post('icons', IconFieldtypeController::class)->name('icon-fieldtype');
+        Route::get('video/details', [VideoFieldtypeController::class, 'details'])->name('video.details');
     });
 
     Route::group(['prefix' => 'field-action-modal'], function () {
diff --git a/src/Enums/VideoType.php b/src/Enums/VideoType.php
new file mode 100644
index 00000000000..960526bf11a
--- /dev/null
+++ b/src/Enums/VideoType.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace Statamic\Enums;
+
+enum VideoType: string
+{
+    case CloudflareStream = 'cloudflare_stream';
+    case Custom = 'custom';
+    case Vimeo = 'vimeo';
+    case YouTube = 'youtube';
+}
diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
new file mode 100644
index 00000000000..2f092e4af5a
--- /dev/null
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace Statamic\Http\Controllers\CP\Fieldtypes;
+
+use Illuminate\Http\Request;
+use Statamic\Enums\VideoType;
+use Statamic\Http\Controllers\CP\CpController;
+
+class VideoFieldtypeController extends CpController
+{
+    public function details(Request $request)
+    {
+        $url = $request->query('url');
+
+        return [
+            'provider' => $provider = $this->getProvider($url),
+            'embed_url' => $this->getEmbedUrl($provider, $url),
+        ];
+    }
+
+    private function getEmbedUrl(VideoType $provider, string $url): string
+    {
+        return match ($provider) {
+            VideoType::CloudflareStream => $this->cloudflareStreamEmbedUrl($url),
+            VideoType::Custom => $url,
+            VideoType::Vimeo => $this->vimeoEmbedUrl($url),
+            VideoType::YouTube => $this->youTubeEmbedUrl($url),
+        };
+    }
+
+    private function getProvider(string $url): VideoType
+    {
+        return match (true) {
+            str($url)->contains(['youtube.com', 'youtu.be']) => VideoType::YouTube,
+            str($url)->contains('vimeo.com') => VideoType::Vimeo,
+            is_int($url) => VideoType::CloudflareStream,
+            default => VideoType::Custom,
+        };
+    }
+
+    private function youTubeEmbedUrl(string $url): string
+    {
+        if (str($url)->contains('youtu.be')) {
+            return str($url)->replace('youtu.be', 'youtube.com/embed');
+        }
+
+        return str($url)
+            ->replace('watch?v=', 'embed/')
+            ->replace('shorts/', 'embed/');
+    }
+
+    private function vimeoEmbedUrl(string $url): string
+    {
+        return str($url)->replace('vimeo.com/', 'player.vimeo.com/video/');
+    }
+
+    private function cloudflareStreamEmbedUrl(string $id): string
+    {
+        return "https://iframe.cloudflarestream.com/{$id}";
+    }
+}

From caa2dedd6d66ffc375c37969ed4f86ab46dc3c53 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Fri, 13 Jun 2025 21:27:43 -0700
Subject: [PATCH 03/29] move the provider/embed logic to the fieldtype

---
 src/Fieldtypes/Video.php | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index 34671cfefcd..f211a923280 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -12,9 +12,12 @@ public function preload()
     {
         /** @todo Fetch these from some repository so folks can add their own */
         return [
-            ['name' => 'Cloudflare Stream', 'handle' => 'cloudflare_stream'],
-            ['name' => 'Vimeo', 'handle' => 'vimeo'],
-            ['name' => 'YouTube', 'handle' => 'youtube'],
+            'providers' => [
+                ['name' => 'Cloudflare Stream', 'handle' => 'cloudflare_stream'],
+                ['name' => 'Vimeo', 'handle' => 'vimeo'],
+                ['name' => 'YouTube', 'handle' => 'youtube'],
+            ],
+            'url' => cp_route('video.details'),
         ];
     }
 

From 63ed860c6301cb461dc667230bc43cfad0c3b334 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Mon, 16 Jun 2025 14:46:51 -0700
Subject: [PATCH 04/29] wip

---
 .../components/fieldtypes/VideoFieldtype.vue  | 31 ++-------
 src/Enums/VideoType.php                       |  2 +-
 .../Fieldtypes/VideoFieldtypeController.php   | 65 ++++++++++++++-----
 3 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index bec9a42e75b..666c2866f77 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -10,7 +10,7 @@
             v-model="provider"
         />
         <ui-input-group>
-            <ui-input-group-prepend :text="__('URL')" />
+            <ui-input-group-prepend :text="prepend" />
             <ui-input
                 :model-value="value"
                 :isReadOnly="isReadOnly"
@@ -22,7 +22,7 @@
         </ui-input-group>
         <ui-description v-if="isInvalid" class="text-red-500">{{ __('statamic::validation.url') }}</ui-description>
         <iframe
-            v-if="shouldShowPreview"
+            v-if="embedUrl"
             :src="embedUrl"
             frameborder="0"
             allow="fullscreen"
@@ -43,6 +43,7 @@ export default {
     data() {
         return {
             embedUrl: null,
+            prepend: __('URL'),
             provider: null,
         };
     },
@@ -52,33 +53,10 @@ export default {
             return this.meta.providers;
         },
 
-        shouldShowPreview() {
-            return !this.isInvalid && (this.isEmbeddable || this.isVideo);
-        },
-
-        isEmbeddable() {
-            const url = this.value || '';
-            const isYoutube = url.includes('youtube') || url.includes('youtu.be');
-            const isVimeo = url.includes('vimeo');
-            return isYoutube || isVimeo;
-        },
-
         isInvalid() {
             let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
             return htmlRegex.test(this.value || '');
         },
-
-        isUrl() {
-            const url = this.value || '';
-            return url.startsWith('http://') || url.startsWith('https://');
-        },
-
-        isVideo() {
-            const url = this.value || '';
-            const isVideo =
-                url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
-            return !this.isEmbeddable && isVideo;
-        },
     },
 
     watch: {
@@ -87,8 +65,9 @@ export default {
                 .get(this.meta.url, { params: { url: this.value } })
                 .then((response) => response.data)
                 .then((data) => {
-                    this.provider = data.provider;
                     this.embedUrl = data.embed_url;
+                    this.prepend = data.prepend;
+                    this.provider = data.provider;
                 });
         },
     },
diff --git a/src/Enums/VideoType.php b/src/Enums/VideoType.php
index 960526bf11a..2a2b32c6af6 100644
--- a/src/Enums/VideoType.php
+++ b/src/Enums/VideoType.php
@@ -5,7 +5,7 @@
 enum VideoType: string
 {
     case CloudflareStream = 'cloudflare_stream';
-    case Custom = 'custom';
+    case Invalid = 'invalid';
     case Vimeo = 'vimeo';
     case YouTube = 'youtube';
 }
diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 2f092e4af5a..aed1224cc07 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -10,15 +10,33 @@ class VideoFieldtypeController extends CpController
 {
     public function details(Request $request)
     {
-        $url = $request->query('url');
+        return $this->providerFromUrl($request->query('url'))->toArray();
+    }
 
-        return [
-            'provider' => $provider = $this->getProvider($url),
-            'embed_url' => $this->getEmbedUrl($provider, $url),
-        ];
+    private function providerFromUrl(string $url): Provider
+    {
+        $type = $this->type($url);
+        $embedUrl = $this->embedUrl($type, $url);
+        $prepend = $this->prepend($type);
+
+        return new Provider(
+            prepend: $prepend,
+            provider: $type,
+            embedUrl: $embedUrl
+        );
+    }
+
+    private function type(string $url): VideoType
+    {
+        return match (true) {
+            str($url)->contains(['youtube.com', 'youtu.be']) => VideoType::YouTube,
+            str($url)->contains('vimeo.com') => VideoType::Vimeo,
+            // is_int($url) => VideoType::CloudflareStream,
+            default => VideoType::CloudflareStream,
+        };
     }
 
-    private function getEmbedUrl(VideoType $provider, string $url): string
+    private function embedUrl(VideoType $provider, string $url): string
     {
         return match ($provider) {
             VideoType::CloudflareStream => $this->cloudflareStreamEmbedUrl($url),
@@ -28,14 +46,9 @@ private function getEmbedUrl(VideoType $provider, string $url): string
         };
     }
 
-    private function getProvider(string $url): VideoType
+    private function cloudflareStreamEmbedUrl(string $id): string
     {
-        return match (true) {
-            str($url)->contains(['youtube.com', 'youtu.be']) => VideoType::YouTube,
-            str($url)->contains('vimeo.com') => VideoType::Vimeo,
-            is_int($url) => VideoType::CloudflareStream,
-            default => VideoType::Custom,
-        };
+        return "https://iframe.cloudflarestream.com/{$id}";
     }
 
     private function youTubeEmbedUrl(string $url): string
@@ -54,8 +67,30 @@ private function vimeoEmbedUrl(string $url): string
         return str($url)->replace('vimeo.com/', 'player.vimeo.com/video/');
     }
 
-    private function cloudflareStreamEmbedUrl(string $id): string
+    private function prepend(VideoType $provider): string
     {
-        return "https://iframe.cloudflarestream.com/{$id}";
+        return match ($provider) {
+            VideoType::CloudflareStream => __('ID'),
+            default => __('URL'),
+        };
+    }
+}
+
+class Provider
+{
+    public function __construct(
+        public string $prepend,
+        public VideoType $provider,
+        public string $embedUrl,
+    ) {
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'prepend' => $this->prepend,
+            'provider' => $this->provider,
+            'embed_url' => $this->embedUrl,
+        ];
     }
 }

From 8548d677db3cfda1ef0f76b4115bedff2fb531f3 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Mon, 16 Jun 2025 15:07:13 -0700
Subject: [PATCH 05/29] =?UTF-8?q?don=E2=80=99t=20know=20how=20to=20identif?=
 =?UTF-8?q?y=20a=20CF=20stream=20id?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index aed1224cc07..12cf7d2207d 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -31,7 +31,6 @@ private function type(string $url): VideoType
         return match (true) {
             str($url)->contains(['youtube.com', 'youtu.be']) => VideoType::YouTube,
             str($url)->contains('vimeo.com') => VideoType::Vimeo,
-            // is_int($url) => VideoType::CloudflareStream,
             default => VideoType::CloudflareStream,
         };
     }

From 738f475b06ed4700de7ad1618a825a4130f28163 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Mon, 16 Jun 2025 15:07:21 -0700
Subject: [PATCH 06/29] move it inside the input group

---
 .../js/components/fieldtypes/VideoFieldtype.vue  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 666c2866f77..ad1e69e01b5 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -2,14 +2,16 @@
     <div
         class="flex flex-col space-y-3 rounded-xl border border-gray-300 bg-gray-100 p-1.5 dark:border-gray-700 dark:bg-gray-900"
     >
-        <Select
-            :options="providers"
-            option-label="name"
-            option-value="handle"
-            :placeholder="__('Provider...')"
-            v-model="provider"
-        />
         <ui-input-group>
+            <div class="w-1/4">
+                <Select
+                    :options="providers"
+                    option-label="name"
+                    option-value="handle"
+                    :placeholder="__('Provider...')"
+                    v-model="provider"
+                />
+            </div>
             <ui-input-group-prepend :text="prepend" />
             <ui-input
                 :model-value="value"

From 0e357ef9e116481f59a347d54f459761d0f2fca9 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 18 Jun 2025 15:12:42 -0700
Subject: [PATCH 07/29] wip

---
 src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 12cf7d2207d..115a50dc03e 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -39,7 +39,6 @@ private function embedUrl(VideoType $provider, string $url): string
     {
         return match ($provider) {
             VideoType::CloudflareStream => $this->cloudflareStreamEmbedUrl($url),
-            VideoType::Custom => $url,
             VideoType::Vimeo => $this->vimeoEmbedUrl($url),
             VideoType::YouTube => $this->youTubeEmbedUrl($url),
         };

From 74f8f9d34b3de152fb905649afb79af41cd83fdb Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Fri, 4 Jul 2025 17:22:06 -0700
Subject: [PATCH 08/29] wip

---
 composer.json                                 |  1 +
 .../components/fieldtypes/VideoFieldtype.vue  | 89 +++++++++---------
 src/Enums/VideoType.php                       | 11 ---
 src/Fieldtypes/Video.php                      | 25 ++++--
 .../Fieldtypes/VideoFieldtypeController.php   | 90 ++++++++-----------
 5 files changed, 104 insertions(+), 112 deletions(-)
 delete mode 100644 src/Enums/VideoType.php

diff --git a/composer.json b/composer.json
index 7314d320d3d..d8304f0ac24 100644
--- a/composer.json
+++ b/composer.json
@@ -22,6 +22,7 @@
         "league/glide": "^3.0",
         "maennchen/zipstream-php": "^3.1",
         "michelf/php-smartypants": "^1.8.1",
+        "mpratt/embera": "~2.0",
         "nesbot/carbon": "^3.0",
         "pixelfear/composer-dist-plugin": "^0.1.4",
         "pragmarx/google2fa": "^8.0",
diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index ad1e69e01b5..83a00c5ed53 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -1,52 +1,50 @@
 <template>
-    <div
-        class="flex flex-col space-y-3 rounded-xl border border-gray-300 bg-gray-100 p-1.5 dark:border-gray-700 dark:bg-gray-900"
-    >
-        <ui-input-group>
-            <div class="w-1/4">
-                <Select
-                    :options="providers"
-                    option-label="name"
-                    option-value="handle"
-                    :placeholder="__('Provider...')"
-                    v-model="provider"
-                />
-            </div>
-            <ui-input-group-prepend :text="prepend" />
-            <ui-input
-                :model-value="value"
-                :isReadOnly="isReadOnly"
-                :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
-                @update:model-value="update"
-                @focus="$emit('focus')"
-                @blur="$emit('blur')"
-            />
-        </ui-input-group>
-        <ui-description v-if="isInvalid" class="text-red-500">{{ __('statamic::validation.url') }}</ui-description>
-        <iframe
+    <div class="flex flex-col space-y-3 rounded-xl border border-gray-300 bg-gray-100 p-1.5 dark:border-gray-700 dark:bg-gray-900">
+        <Combobox
+            v-model="provider"
+            :options="providers"
+            option-label="provider"
+            option-value="provider"
+            :placeholder="__('Provider...')"
+        />
+        <Input
+            v-if="provider != 'Cloudflare'"
+            :model-value="url"
+            :isReadOnly="isReadOnly"
+            :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
+            :prepend="__('URL')"
+            @update:model-value="detailsFromUrl"
+        />
+        <Input
+            v-if="provider == 'Cloudflare'"
+            :model-value="videoId"
+            :isReadOnly="isReadOnly"
+            :prepend="__('ID')"
+            @update:model-value="detailsFromCloudflare"
+        />
+        <div
             v-if="embedUrl"
-            :src="embedUrl"
-            frameborder="0"
-            allow="fullscreen"
             class="aspect-video rounded-lg"
-        ></iframe>
+            v-html="embedUrl"
+        ></div>
     </div>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import { Select } from '@statamic/ui';
+import { Combobox, Input } from '@statamic/ui';
 
 export default {
-    components: { Select },
+    components: { Combobox, Input },
 
     mixins: [Fieldtype],
 
     data() {
         return {
             embedUrl: null,
-            prepend: __('URL'),
             provider: null,
+            url: null,
+            videoId: null,
         };
     },
 
@@ -54,24 +52,33 @@ export default {
         providers() {
             return this.meta.providers;
         },
+    },
+
+    methods: {
+        detailsFromCloudflare(id) {
+            this.videoId = id;
 
-        isInvalid() {
-            let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
-            return htmlRegex.test(this.value || '');
+            this.getVideoData({type: this.provider, id: this.videoId});
         },
-    },
 
-    watch: {
-        value() {
+        detailsFromUrl(url) {
+            if (url == null) return;
+
+            this.getVideoData({url: url});
+        },
+
+        getVideoData(params) {
             this.$axios
-                .get(this.meta.url, { params: { url: this.value } })
+                .get(this.meta.url, { params: params })
                 .then((response) => response.data)
                 .then((data) => {
                     this.embedUrl = data.embed_url;
-                    this.prepend = data.prepend;
                     this.provider = data.provider;
                 });
+
+            // this.update(whatever);
         },
-    },
+
+    }
 };
 </script>
diff --git a/src/Enums/VideoType.php b/src/Enums/VideoType.php
deleted file mode 100644
index 2a2b32c6af6..00000000000
--- a/src/Enums/VideoType.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<?php
-
-namespace Statamic\Enums;
-
-enum VideoType: string
-{
-    case CloudflareStream = 'cloudflare_stream';
-    case Invalid = 'invalid';
-    case Vimeo = 'vimeo';
-    case YouTube = 'youtube';
-}
diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index f211a923280..8e8d293cdba 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -2,6 +2,9 @@
 
 namespace Statamic\Fieldtypes;
 
+use Embera\ProviderCollection\DefaultProviderCollection;
+use Embera\ProviderCollection\SlimProviderCollection;
+use Illuminate\Support\Collection;
 use Statamic\Fields\Fieldtype;
 
 class Video extends Fieldtype
@@ -10,13 +13,11 @@ class Video extends Fieldtype
 
     public function preload()
     {
+        $providers = new Providers();
+
         /** @todo Fetch these from some repository so folks can add their own */
         return [
-            'providers' => [
-                ['name' => 'Cloudflare Stream', 'handle' => 'cloudflare_stream'],
-                ['name' => 'Vimeo', 'handle' => 'vimeo'],
-                ['name' => 'YouTube', 'handle' => 'youtube'],
-            ],
+            'providers' => ray()->pass($providers->get())->all(),
             'url' => cp_route('video.details'),
         ];
     }
@@ -42,3 +43,17 @@ protected function configFieldItems(): array
         ];
     }
 }
+
+class Providers extends SlimProviderCollection
+{
+    public function get(): Collection
+    {
+        return collect($this->providers)
+            ->unique()
+            ->values()
+            ->map(fn(string $class) => ['provider' => class_basename($class)])
+            ->add(['provider' => 'Cloudflare'])
+            ->sortBy('provider')
+            ->values();
+    }
+}
diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 115a50dc03e..4f6f730733b 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -2,93 +2,73 @@
 
 namespace Statamic\Http\Controllers\CP\Fieldtypes;
 
+use Embera\Embera;
+use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Http\Request;
-use Statamic\Enums\VideoType;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Fluent;
 use Statamic\Http\Controllers\CP\CpController;
 
 class VideoFieldtypeController extends CpController
 {
     public function details(Request $request)
     {
-        return $this->providerFromUrl($request->query('url'))->toArray();
-    }
-
-    private function providerFromUrl(string $url): Provider
-    {
-        $type = $this->type($url);
-        $embedUrl = $this->embedUrl($type, $url);
-        $prepend = $this->prepend($type);
+        if (! is_null($url = $request->query('url'))) {
+            return Video::fromUrl($url);
+        }
 
-        return new Provider(
-            prepend: $prepend,
-            provider: $type,
-            embedUrl: $embedUrl
-        );
-    }
+        if ($this->isCloudflareStream($request)) {
+            $id = $request->query('id');
+            $embedUrl = "https://iframe.cloudflarestream.com/{$id}";
+            $iframe = "<iframe src='$embedUrl' frameborder='0' allow='fullscreen'></iframe>";
 
-    private function type(string $url): VideoType
-    {
-        return match (true) {
-            str($url)->contains(['youtube.com', 'youtu.be']) => VideoType::YouTube,
-            str($url)->contains('vimeo.com') => VideoType::Vimeo,
-            default => VideoType::CloudflareStream,
-        };
-    }
+            return new Video(id: $id, provider: 'Cloudflare', embedUrl: $iframe);
+        }
 
-    private function embedUrl(VideoType $provider, string $url): string
-    {
-        return match ($provider) {
-            VideoType::CloudflareStream => $this->cloudflareStreamEmbedUrl($url),
-            VideoType::Vimeo => $this->vimeoEmbedUrl($url),
-            VideoType::YouTube => $this->youTubeEmbedUrl($url),
-        };
+        return Video::notSupported();
     }
 
-    private function cloudflareStreamEmbedUrl(string $id): string
+    private function isCloudflareStream(Request $request): bool
     {
-        return "https://iframe.cloudflarestream.com/{$id}";
+        return $request->has('id') && $request->query('type') === 'Cloudflare';
     }
+}
 
-    private function youTubeEmbedUrl(string $url): string
+class Video implements Arrayable
+{
+    public static function fromUrl(string $url): self
     {
-        if (str($url)->contains('youtu.be')) {
-            return str($url)->replace('youtu.be', 'youtube.com/embed');
+        if (empty($details = (new Embera)->getUrlData($url))) {
+            return static::notSupported();
         }
 
-        return str($url)
-            ->replace('watch?v=', 'embed/')
-            ->replace('shorts/', 'embed/');
-    }
+        $data = new Fluent(Arr::first($details));
 
-    private function vimeoEmbedUrl(string $url): string
-    {
-        return str($url)->replace('vimeo.com/', 'player.vimeo.com/video/');
+        return new self(
+            id: $data->video_id,
+            provider: strtolower($data->embera_provider_name),
+            embedUrl: $data->html
+        );
     }
 
-    private function prepend(VideoType $provider): string
+    public static function notSupported(): self
     {
-        return match ($provider) {
-            VideoType::CloudflareStream => __('ID'),
-            default => __('URL'),
-        };
+        return new self(provider: 'not_supported');
     }
-}
 
-class Provider
-{
     public function __construct(
-        public string $prepend,
-        public VideoType $provider,
-        public string $embedUrl,
+        public string $provider,
+        public ?string $id = null,
+        public ?string $embedUrl = null,
     ) {
     }
 
     public function toArray(): array
     {
         return [
-            'prepend' => $this->prepend,
-            'provider' => $this->provider,
             'embed_url' => $this->embedUrl,
+            'id' => $this->id,
+            'provider' => $this->provider,
         ];
     }
 }

From 37d64b2c46b120443db51d094c17b9bdd9198fdc Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 13:29:19 -0700
Subject: [PATCH 09/29] some sugar

---
 resources/js/components/fieldtypes/Fieldtype.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 9d42f8e1124..43d1fb232b8 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -1,8 +1,8 @@
 <script>
 import HasFieldActions from '../field-actions/HasFieldActions';
-import debounce from '@statamic/util/debounce.js';
 import props from './props.js';
 import emits from './emits.js';
+import { debounce as statamicDebounce } from '@statamic/util/debounce.js';
 
 export default {
     emits,
@@ -23,6 +23,10 @@ export default {
     props,
 
     methods: {
+        debounce(closure) {
+            statamicDebounce(closure);
+        },
+
         update(value) {
             this.$emit('update:value', value);
         },

From 51c3fa800d2fdef8fb9ccf862bc7f96d05efe525 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 13:29:30 -0700
Subject: [PATCH 10/29] wip

---
 .../components/fieldtypes/VideoFieldtype.vue  | 31 +++++++++++++------
 src/Fields/Fieldtype.php                      | 15 +++++++++
 src/Fieldtypes/Video.php                      | 22 +++++++++----
 3 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 83a00c5ed53..8b402526bd8 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -43,6 +43,7 @@ export default {
         return {
             embedUrl: null,
             provider: null,
+            savedValue: null,
             url: null,
             videoId: null,
         };
@@ -56,27 +57,39 @@ export default {
 
     methods: {
         detailsFromCloudflare(id) {
+            if (id == null) return;
+
+            this.savedValue = 'cloudflare::id';
             this.videoId = id;
+            this.url = null;
 
             this.getVideoData({type: this.provider, id: this.videoId});
+
         },
 
         detailsFromUrl(url) {
             if (url == null) return;
 
+            this.savedValue = url;
+            this.videoId = null;
+            this.url = url;
+
             this.getVideoData({url: url});
+
         },
 
         getVideoData(params) {
-            this.$axios
-                .get(this.meta.url, { params: params })
-                .then((response) => response.data)
-                .then((data) => {
-                    this.embedUrl = data.embed_url;
-                    this.provider = data.provider;
-                });
-
-            // this.update(whatever);
+            this.debounce(() => {
+                this.$axios
+                    .get(this.meta.url, { params: params })
+                    .then((response) => response.data)
+                    .then((data) => {
+                        this.embedUrl = data.embed_url;
+                        this.provider = data.provider;
+                    });
+
+                this.update(this.savedValue);
+            })
         },
 
     }
diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index c4a9d93787e..da9d7c212f6 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -21,22 +21,37 @@ abstract class Fieldtype implements Arrayable
     }
 
     protected static $title;
+
     protected static $binding = 'fieldtypes';
 
     protected $field;
+
     protected $localizable = true;
+
     protected $validatable = true;
+
     protected $defaultable = true;
+
     protected $selectable = true;
+
     protected $selectableInForms = false;
+
     protected $relationship = false;
+
     protected $categories = [];
+
     protected $keywords = [];
+
     protected $rules = [];
+
     protected $extraRules = [];
+
     protected $defaultValue;
+
     protected $configFields = [];
+
     protected static $extraConfigFields = [];
+
     protected $icon;
 
     public static function title()
diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index 8e8d293cdba..1a93295c22d 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -2,22 +2,31 @@
 
 namespace Statamic\Fieldtypes;
 
-use Embera\ProviderCollection\DefaultProviderCollection;
 use Embera\ProviderCollection\SlimProviderCollection;
-use Illuminate\Support\Collection;
 use Statamic\Fields\Fieldtype;
 
 class Video extends Fieldtype
 {
     protected $categories = ['media'];
 
+    public function augment($value)
+    {
+        /** @todo This is dumb */
+        if (str($value)->isUrl()) {
+            return $value;
+        }
+
+        //otherwise assume it's a Cloudflare ID
+        return str($value)->afterLast('::')->value();
+    }
+
     public function preload()
     {
         $providers = new Providers();
 
         /** @todo Fetch these from some repository so folks can add their own */
         return [
-            'providers' => ray()->pass($providers->get())->all(),
+            'providers' => $providers->get(),
             'url' => cp_route('video.details'),
         ];
     }
@@ -46,14 +55,15 @@ protected function configFieldItems(): array
 
 class Providers extends SlimProviderCollection
 {
-    public function get(): Collection
+    public function get(): array
     {
         return collect($this->providers)
             ->unique()
             ->values()
-            ->map(fn(string $class) => ['provider' => class_basename($class)])
+            ->map(fn (string $class) => ['provider' => class_basename($class)])
             ->add(['provider' => 'Cloudflare'])
             ->sortBy('provider')
-            ->values();
+            ->values()
+            ->all();
     }
 }

From 8a831e7225ff032f2ec84acb759590696143a801 Mon Sep 17 00:00:00 2001
From: Erin Dalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 13:30:41 -0700
Subject: [PATCH 11/29] Discard changes to src/Fields/Fieldtype.php

---
 src/Fields/Fieldtype.php | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/Fields/Fieldtype.php b/src/Fields/Fieldtype.php
index da9d7c212f6..c4a9d93787e 100644
--- a/src/Fields/Fieldtype.php
+++ b/src/Fields/Fieldtype.php
@@ -21,37 +21,22 @@ abstract class Fieldtype implements Arrayable
     }
 
     protected static $title;
-
     protected static $binding = 'fieldtypes';
 
     protected $field;
-
     protected $localizable = true;
-
     protected $validatable = true;
-
     protected $defaultable = true;
-
     protected $selectable = true;
-
     protected $selectableInForms = false;
-
     protected $relationship = false;
-
     protected $categories = [];
-
     protected $keywords = [];
-
     protected $rules = [];
-
     protected $extraRules = [];
-
     protected $defaultValue;
-
     protected $configFields = [];
-
     protected static $extraConfigFields = [];
-
     protected $icon;
 
     public static function title()

From 2f3c41b5448e7e4b35ec84ed0fcdd7abc16fb40b Mon Sep 17 00:00:00 2001
From: Erin Dalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 14:06:26 -0700
Subject: [PATCH 12/29] Discard changes to
 resources/js/components/fieldtypes/Fieldtype.vue

---
 resources/js/components/fieldtypes/Fieldtype.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/resources/js/components/fieldtypes/Fieldtype.vue b/resources/js/components/fieldtypes/Fieldtype.vue
index 43d1fb232b8..9d42f8e1124 100644
--- a/resources/js/components/fieldtypes/Fieldtype.vue
+++ b/resources/js/components/fieldtypes/Fieldtype.vue
@@ -1,8 +1,8 @@
 <script>
 import HasFieldActions from '../field-actions/HasFieldActions';
+import debounce from '@statamic/util/debounce.js';
 import props from './props.js';
 import emits from './emits.js';
-import { debounce as statamicDebounce } from '@statamic/util/debounce.js';
 
 export default {
     emits,
@@ -23,10 +23,6 @@ export default {
     props,
 
     methods: {
-        debounce(closure) {
-            statamicDebounce(closure);
-        },
-
         update(value) {
             this.$emit('update:value', value);
         },

From 76e7e450116aa3f40a926c26d3a4150274257c67 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 14:07:56 -0700
Subject: [PATCH 13/29] actually set the id

---
 resources/js/components/fieldtypes/VideoFieldtype.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 8b402526bd8..1dce7624bb4 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -59,12 +59,11 @@ export default {
         detailsFromCloudflare(id) {
             if (id == null) return;
 
-            this.savedValue = 'cloudflare::id';
+            this.savedValue = `cloudflare::${id}`;
             this.videoId = id;
             this.url = null;
 
             this.getVideoData({type: this.provider, id: this.videoId});
-
         },
 
         detailsFromUrl(url) {
@@ -75,7 +74,6 @@ export default {
             this.url = url;
 
             this.getVideoData({url: url});
-
         },
 
         getVideoData(params) {

From a7698615bef2344693025a7ba16a3f62084b7da0 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 14:31:18 -0700
Subject: [PATCH 14/29] =?UTF-8?q?don=E2=80=99t=20debounce,=20for=20now?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/fieldtypes/VideoFieldtype.vue   | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 1dce7624bb4..f6eb1a46ff9 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -77,17 +77,15 @@ export default {
         },
 
         getVideoData(params) {
-            this.debounce(() => {
-                this.$axios
-                    .get(this.meta.url, { params: params })
-                    .then((response) => response.data)
-                    .then((data) => {
-                        this.embedUrl = data.embed_url;
-                        this.provider = data.provider;
-                    });
+            this.$axios
+                .get(this.meta.url, { params: params })
+                .then((response) => response.data)
+                .then((data) => {
+                    this.embedUrl = data.embed_url;
+                    this.provider = data.provider;
+                });
 
-                this.update(this.savedValue);
-            })
+            this.update(this.savedValue);
         },
 
     }

From e84848c2046a3339857ec27e47e91cfcf7a043c0 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 14:31:23 -0700
Subject: [PATCH 15/29] tidy

---
 resources/js/components/fieldtypes/VideoFieldtype.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index f6eb1a46ff9..f3b755c67e6 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -16,7 +16,7 @@
             @update:model-value="detailsFromUrl"
         />
         <Input
-            v-if="provider == 'Cloudflare'"
+            v-else
             :model-value="videoId"
             :isReadOnly="isReadOnly"
             :prepend="__('ID')"

From a9aa392f338142f40d444ed238fbd20984118f4d Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 14:37:18 -0700
Subject: [PATCH 16/29] fix providers

---
 src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 4f6f730733b..1f49d5baf3e 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -46,7 +46,7 @@ public static function fromUrl(string $url): self
 
         return new self(
             id: $data->video_id,
-            provider: strtolower($data->embera_provider_name),
+            provider: $data->embera_provider_name,
             embedUrl: $data->html
         );
     }

From 78bbdf5e156ad5aefd3d53392ac2126188355a85 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 14:37:32 -0700
Subject: [PATCH 17/29] this gets rid of width/height

---
 src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 1f49d5baf3e..48832dd07f9 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -38,7 +38,7 @@ class Video implements Arrayable
 {
     public static function fromUrl(string $url): self
     {
-        if (empty($details = (new Embera)->getUrlData($url))) {
+        if (empty($details = (new Embera(['responsive' => true]))->getUrlData($url))) {
             return static::notSupported();
         }
 

From 87141a10e7cf58be2041c7ff2f7772f04a67dd94 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 15:02:10 -0700
Subject: [PATCH 18/29] fix CF sizing

---
 src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 48832dd07f9..0242dfd04d5 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -20,7 +20,7 @@ public function details(Request $request)
         if ($this->isCloudflareStream($request)) {
             $id = $request->query('id');
             $embedUrl = "https://iframe.cloudflarestream.com/{$id}";
-            $iframe = "<iframe src='$embedUrl' frameborder='0' allow='fullscreen'></iframe>";
+            $iframe = "<iframe src='$embedUrl' frameborder='0' allow='fullscreen' style='height: 100%; width: 100%;'></iframe>";
 
             return new Video(id: $id, provider: 'Cloudflare', embedUrl: $iframe);
         }

From e884b3a055feef7fbee31168e97cc0b92ee7fb02 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 9 Jul 2025 15:05:28 -0700
Subject: [PATCH 19/29] Not supported

---
 src/Fieldtypes/Video.php                                        | 1 +
 src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index 1a93295c22d..fae9ef11a7f 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -63,6 +63,7 @@ public function get(): array
             ->map(fn (string $class) => ['provider' => class_basename($class)])
             ->add(['provider' => 'Cloudflare'])
             ->sortBy('provider')
+            ->add(['provider' => 'Not Supported'])
             ->values()
             ->all();
     }
diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 0242dfd04d5..562632c5c36 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -53,7 +53,7 @@ public static function fromUrl(string $url): self
 
     public static function notSupported(): self
     {
-        return new self(provider: 'not_supported');
+        return new self(provider: 'Not Supported');
     }
 
     public function __construct(

From 41056dc22507501849fe63c5ca22ccd3cba9ba02 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Thu, 10 Jul 2025 10:03:48 -0700
Subject: [PATCH 20/29] null be null

---
 src/Fieldtypes/Video.php | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index fae9ef11a7f..590f046a6a9 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -11,7 +11,10 @@ class Video extends Fieldtype
 
     public function augment($value)
     {
-        /** @todo This is dumb */
+        if (is_null($value)) {
+            return null;
+        }
+
         if (str($value)->isUrl()) {
             return $value;
         }

From 5548b80560e9b7b03bfb8bd2136435c9db57e188 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 18 Mar 2026 13:40:10 -0700
Subject: [PATCH 21/29] fix bad merge

---
 .../components/fieldtypes/VideoFieldtype.vue  | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 4bd6ece2fe9..5ff8b02695f 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -72,9 +72,65 @@ export default {
     },
 
     computed: {
+        shouldShowPreview() {
+            return !this.isInvalid && (this.isEmbeddable || this.isVideo);
+        },
+
+        embedUrl() {
+            let embed_url = this.value || '';
+
+            if (embed_url.includes('youtube')) {
+                embed_url = embed_url.includes('shorts/')
+                    ? embed_url.replace('shorts/', 'embed/')
+                    : embed_url.replace('watch?v=', 'embed/');
+            }
+
+            if (embed_url.includes('youtu.be')) {
+                embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
+            }
+
+            if (embed_url.includes('vimeo')) {
+                embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
+
+                if (!this.value.includes('progressive_redirect') && embed_url.split('/').length > 5) {
+                    let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
+                    embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
+                }
+            }
+
+            if (embed_url.includes('&') && !embed_url.includes('?')) {
+                embed_url = embed_url.replace('&', '?');
+            }
+
+            return embed_url;
+        },
+
+        isEmbeddable() {
+            const url = this.value || '';
+            const isYoutube = url.includes('youtube') || url.includes('youtu.be');
+            const isVimeo = url.includes('vimeo');
+            return isYoutube || isVimeo;
+        },
+
+        isInvalid() {
+            let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
+            return htmlRegex.test(this.value || '');
+        },
+
+        isUrl() {
+            const url = this.value || '';
+            return url.startsWith('http://') || url.startsWith('https://');
+        },
+
+        isVideo() {
+            const url = this.value || '';
+            const isVideo = url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
+            return !this.isEmbeddable && isVideo;
+        },
+
         providers() {
             return this.meta.providers;
-        },
+        }
     },
 
     methods: {

From 18650f08bae64504913eae54f5cbcdba29fea19c Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 18 Mar 2026 13:59:12 -0700
Subject: [PATCH 22/29] wip

---
 .../components/fieldtypes/VideoFieldtype.vue  | 82 +++++++++----------
 1 file changed, 37 insertions(+), 45 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 5ff8b02695f..8716ebdc0b1 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -1,42 +1,34 @@
 <template>
     <div class="flex flex-col space-y-3 p-1.5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-700 rounded-xl">
-<!--
-<Combobox
+        <ui-combo-box
             v-model="provider"
             :options="providers"
             option-label="provider"
             option-value="provider"
             :placeholder="__('Provider...')"
         />
-        <Input
-            v-if="provider != 'Cloudflare'"
-            :model-value="url"
-            :isReadOnly="isReadOnly"
-            :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
-            :prepend="__('URL')"
-            @update:model-value="detailsFromUrl"
-        />
-        <Input
-            v-else
-            :model-value="videoId"
-            :isReadOnly="isReadOnly"
-            :prepend="__('ID')"
-            @update:model-value="detailsFromCloudflare"
-        />
--->
-        <ui-input-group>
+
+        <ui-input-group v-if="provider != 'Cloudflare'">
             <ui-input-group-prepend :text="__('URL')" />
             <ui-input
-                :model-value="value"
+                :model-value="url"
                 :isReadOnly="isReadOnly"
                 :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
                 :aria-label="__('Video URL')"
-                @update:model-value="update"
+                @update:model-value="detailsFromUrl"
                 @focus="$emit('focus')"
                 @blur="$emit('blur')"
                 input-class="border-s-0"
             />
         </ui-input-group>
+        <ui-input
+            v-else
+            :model-value="videoId"
+            :isReadOnly="isReadOnly"
+            :prepend="__('ID')"
+            @update:model-value="detailsFromCloudflare"
+        />
+
         <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
         <iframe
             v-if="shouldShowPreview"
@@ -62,12 +54,12 @@ export default {
     data() {
         return {
             embedUrl: null,
+            isVisible: false,
+            observer: null,
             provider: null,
             savedValue: null,
             url: null,
             videoId: null,
-            isVisible: false,
-            observer: null,
         };
     },
 
@@ -76,34 +68,34 @@ export default {
             return !this.isInvalid && (this.isEmbeddable || this.isVideo);
         },
 
-        embedUrl() {
-            let embed_url = this.value || '';
+        // embedUrl() {
+        //     let embed_url = this.value || '';
 
-            if (embed_url.includes('youtube')) {
-                embed_url = embed_url.includes('shorts/')
-                    ? embed_url.replace('shorts/', 'embed/')
-                    : embed_url.replace('watch?v=', 'embed/');
-            }
+        //     if (embed_url.includes('youtube')) {
+        //         embed_url = embed_url.includes('shorts/')
+        //             ? embed_url.replace('shorts/', 'embed/')
+        //             : embed_url.replace('watch?v=', 'embed/');
+        //     }
 
-            if (embed_url.includes('youtu.be')) {
-                embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
-            }
+        //     if (embed_url.includes('youtu.be')) {
+        //         embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
+        //     }
 
-            if (embed_url.includes('vimeo')) {
-                embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
+        //     if (embed_url.includes('vimeo')) {
+        //         embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
 
-                if (!this.value.includes('progressive_redirect') && embed_url.split('/').length > 5) {
-                    let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
-                    embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
-                }
-            }
+        //         if (!this.value.includes('progressive_redirect') && embed_url.split('/').length > 5) {
+        //             let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
+        //             embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
+        //         }
+        //     }
 
-            if (embed_url.includes('&') && !embed_url.includes('?')) {
-                embed_url = embed_url.replace('&', '?');
-            }
+        //     if (embed_url.includes('&') && !embed_url.includes('?')) {
+        //         embed_url = embed_url.replace('&', '?');
+        //     }
 
-            return embed_url;
-        },
+        //     return embed_url;
+        // },
 
         isEmbeddable() {
             const url = this.value || '';

From b5f0be3beedd442dc14687f0a1f2d117c75b7756 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 18 Mar 2026 13:59:48 -0700
Subject: [PATCH 23/29] tidy

---
 resources/js/components/fieldtypes/VideoFieldtype.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 8716ebdc0b1..abcd260cc03 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -44,11 +44,8 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import { Combobox, Input } from '@statamic/ui';
 
 export default {
-    components: { Combobox, Input },
-
     mixins: [Fieldtype],
 
     data() {

From 2caaf6d23e78d3c6e20dfaa196ef9ae2df04f27d Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 18 Mar 2026 16:57:57 -0700
Subject: [PATCH 24/29] better display of embed

---
 resources/css/components/fieldtypes/video.css | 18 ++++
 resources/css/cp.css                          |  1 +
 .../components/fieldtypes/VideoFieldtype.vue  | 87 +++++++------------
 src/Fieldtypes/Video.php                      |  5 ++
 src/Fieldtypes/Video/Video.php                | 47 ++++++++++
 .../Fieldtypes/VideoFieldtypeController.php   | 48 +---------
 6 files changed, 105 insertions(+), 101 deletions(-)
 create mode 100644 resources/css/components/fieldtypes/video.css
 create mode 100644 src/Fieldtypes/Video/Video.php

diff --git a/resources/css/components/fieldtypes/video.css b/resources/css/components/fieldtypes/video.css
new file mode 100644
index 00000000000..639147f7f00
--- /dev/null
+++ b/resources/css/components/fieldtypes/video.css
@@ -0,0 +1,18 @@
+.embera-embed-responsive {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0;
+    overflow: hidden;
+    padding-bottom: 50%;
+}
+
+.embera-embed-responsive-item {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index dd8ab0f1172..a3686b28127 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -37,4 +37,5 @@
 @import './components/fieldtypes/relationship.css';
 @import './components/fieldtypes/section.css';
 @import './components/fieldtypes/table.css';
+@import './components/fieldtypes/video.css';
 @import './components/fieldtypes/width.css';
diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index abcd260cc03..481eab710f8 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col space-y-3 p-1.5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-700 rounded-xl">
-        <ui-combo-box
+        <ui-combobox
             v-model="provider"
             :options="providers"
             option-label="provider"
@@ -8,19 +8,19 @@
             :placeholder="__('Provider...')"
         />
 
-        <ui-input-group v-if="provider != 'Cloudflare'">
-            <ui-input-group-prepend :text="__('URL')" />
-            <ui-input
-                :model-value="url"
-                :isReadOnly="isReadOnly"
-                :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
-                :aria-label="__('Video URL')"
-                @update:model-value="detailsFromUrl"
-                @focus="$emit('focus')"
-                @blur="$emit('blur')"
-                input-class="border-s-0"
-            />
-        </ui-input-group>
+        <ui-input
+            v-if="provider != 'Cloudflare'"
+            :aria-label="__('Video URL')"
+            input-class="border-s-0"
+            :isReadOnly="isReadOnly"
+            :model-value="url"
+            :placeholder="__(config.placeholder) || 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'"
+            :prepend="__('URL')"
+            @update:model-value="detailsFromUrl"
+            @focus="$emit('focus')"
+            @blur="$emit('blur')"
+        />
+
         <ui-input
             v-else
             :model-value="videoId"
@@ -30,15 +30,10 @@
         />
 
         <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
-        <iframe
+        <div
             v-if="shouldShowPreview"
-            ref="iframe"
-            :src="isVisible ? embedUrl : null"
-            frameborder="0"
-            allow="fullscreen"
-            class="rounded-lg aspect-video"
-            loading="lazy"
-        ></iframe>
+            v-html="embed"
+        ></div>
     </div>
 </template>
 
@@ -50,50 +45,21 @@ export default {
 
     data() {
         return {
-            embedUrl: null,
+            embed: this.meta.embed,
             isVisible: false,
             observer: null,
-            provider: null,
+            provider: this.meta.provider,
             savedValue: null,
-            url: null,
+            url: this.value,
             videoId: null,
         };
     },
 
     computed: {
         shouldShowPreview() {
-            return !this.isInvalid && (this.isEmbeddable || this.isVideo);
+            return this.embed;
         },
 
-        // embedUrl() {
-        //     let embed_url = this.value || '';
-
-        //     if (embed_url.includes('youtube')) {
-        //         embed_url = embed_url.includes('shorts/')
-        //             ? embed_url.replace('shorts/', 'embed/')
-        //             : embed_url.replace('watch?v=', 'embed/');
-        //     }
-
-        //     if (embed_url.includes('youtu.be')) {
-        //         embed_url = embed_url.replace('youtu.be', 'www.youtube.com/embed');
-        //     }
-
-        //     if (embed_url.includes('vimeo')) {
-        //         embed_url = embed_url.replace('/vimeo.com', '/player.vimeo.com/video');
-
-        //         if (!this.value.includes('progressive_redirect') && embed_url.split('/').length > 5) {
-        //             let hash = embed_url.substr(embed_url.lastIndexOf('/') + 1);
-        //             embed_url = embed_url.substr(0, embed_url.lastIndexOf('/')) + '?h=' + hash.replace('?', '&');
-        //         }
-        //     }
-
-        //     if (embed_url.includes('&') && !embed_url.includes('?')) {
-        //         embed_url = embed_url.replace('&', '?');
-        //     }
-
-        //     return embed_url;
-        // },
-
         isEmbeddable() {
             const url = this.value || '';
             const isYoutube = url.includes('youtube') || url.includes('youtu.be');
@@ -122,6 +88,15 @@ export default {
         }
     },
 
+    watch: {
+        provider(newProvider, oldProvider) {
+            if (newProvider != oldProvider) {
+                this.embed = null;
+                this.url = null;
+            }
+        }
+    },
+
     methods: {
         detailsFromCloudflare(id) {
             if (id == null) return;
@@ -148,7 +123,7 @@ export default {
                 .get(this.meta.url, { params: params })
                 .then((response) => response.data)
                 .then((data) => {
-                    this.embedUrl = data.embed_url;
+                    this.embed = data.embed;
                     this.provider = data.provider;
                 });
 
diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index a532c24ceb2..c262b109d8f 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -4,6 +4,7 @@
 
 use Embera\ProviderCollection\SlimProviderCollection;
 use Statamic\Fields\Fieldtype;
+use Statamic\Fieldtypes\Video\Video as VideoDetails;
 
 class Video extends Fieldtype
 {
@@ -27,8 +28,12 @@ public function preload()
     {
         $providers = new Providers();
 
+        $video = VideoDetails::fromUrl($this->field()->value());
+
         /** @todo Fetch these from some repository so folks can add their own */
         return [
+            'embed' => $video->embed,
+            'provider' => $video->provider,
             'providers' => $providers->get(),
             'url' => cp_route('video.details'),
         ];
diff --git a/src/Fieldtypes/Video/Video.php b/src/Fieldtypes/Video/Video.php
new file mode 100644
index 00000000000..8a78137d13b
--- /dev/null
+++ b/src/Fieldtypes/Video/Video.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace Statamic\Fieldtypes\Video;
+
+use Embera\Embera;
+use Illuminate\Contracts\Support\Arrayable;
+use Illuminate\Support\Arr;
+use Illuminate\Support\Fluent;
+
+class Video implements Arrayable
+{
+    public static function fromUrl(string $url): self
+    {
+        if (empty($details = (new Embera(['responsive' => true]))->getUrlData($url))) {
+            return static::notSupported();
+        }
+
+        $data = new Fluent(Arr::first($details));
+
+        return new self(
+            id: $data->video_id,
+            provider: $data->embera_provider_name,
+            embed: $data->html
+        );
+    }
+
+    public static function notSupported(): self
+    {
+        return new self(provider: 'Not Supported');
+    }
+
+    public function __construct(
+        public string $provider,
+        public ?string $id = null,
+        public ?string $embed = null,
+    ) {
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'embed' => $this->embed,
+            'id' => $this->id,
+            'provider' => $this->provider,
+        ];
+    }
+}
diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 562632c5c36..9c9f4fb7c9e 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -2,16 +2,13 @@
 
 namespace Statamic\Http\Controllers\CP\Fieldtypes;
 
-use Embera\Embera;
-use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Http\Request;
-use Illuminate\Support\Arr;
-use Illuminate\Support\Fluent;
+use Statamic\Fieldtypes\Video\Video;
 use Statamic\Http\Controllers\CP\CpController;
 
 class VideoFieldtypeController extends CpController
 {
-    public function details(Request $request)
+    public function details(Request $request): Video
     {
         if (! is_null($url = $request->query('url'))) {
             return Video::fromUrl($url);
@@ -22,7 +19,7 @@ public function details(Request $request)
             $embedUrl = "https://iframe.cloudflarestream.com/{$id}";
             $iframe = "<iframe src='$embedUrl' frameborder='0' allow='fullscreen' style='height: 100%; width: 100%;'></iframe>";
 
-            return new Video(id: $id, provider: 'Cloudflare', embedUrl: $iframe);
+            return new Video(id: $id, provider: 'Cloudflare', embed: $iframe);
         }
 
         return Video::notSupported();
@@ -33,42 +30,3 @@ private function isCloudflareStream(Request $request): bool
         return $request->has('id') && $request->query('type') === 'Cloudflare';
     }
 }
-
-class Video implements Arrayable
-{
-    public static function fromUrl(string $url): self
-    {
-        if (empty($details = (new Embera(['responsive' => true]))->getUrlData($url))) {
-            return static::notSupported();
-        }
-
-        $data = new Fluent(Arr::first($details));
-
-        return new self(
-            id: $data->video_id,
-            provider: $data->embera_provider_name,
-            embedUrl: $data->html
-        );
-    }
-
-    public static function notSupported(): self
-    {
-        return new self(provider: 'Not Supported');
-    }
-
-    public function __construct(
-        public string $provider,
-        public ?string $id = null,
-        public ?string $embedUrl = null,
-    ) {
-    }
-
-    public function toArray(): array
-    {
-        return [
-            'embed_url' => $this->embedUrl,
-            'id' => $this->id,
-            'provider' => $this->provider,
-        ];
-    }
-}

From 3fcbbf739f789b90783c6d264791135240287c37 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 18 Mar 2026 17:01:21 -0700
Subject: [PATCH 25/29] tidy

---
 .../components/fieldtypes/VideoFieldtype.vue  | 29 +------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 481eab710f8..1132b3f0774 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -29,11 +29,7 @@
             @update:model-value="detailsFromCloudflare"
         />
 
-        <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
-        <div
-            v-if="shouldShowPreview"
-            v-html="embed"
-        ></div>
+        <div v-if="shouldShowPreview" v-html="embed"></div>
     </div>
 </template>
 
@@ -60,29 +56,6 @@ export default {
             return this.embed;
         },
 
-        isEmbeddable() {
-            const url = this.value || '';
-            const isYoutube = url.includes('youtube') || url.includes('youtu.be');
-            const isVimeo = url.includes('vimeo');
-            return isYoutube || isVimeo;
-        },
-
-        isInvalid() {
-            let htmlRegex = new RegExp(/<([A-Z][A-Z0-9]*)\b[^>]*>.*?<\/\1>|<([A-Z][A-Z0-9]*)\b[^\/]*\/>/i);
-            return htmlRegex.test(this.value || '');
-        },
-
-        isUrl() {
-            const url = this.value || '';
-            return url.startsWith('http://') || url.startsWith('https://');
-        },
-
-        isVideo() {
-            const url = this.value || '';
-            const isVideo = url.includes('.mp4') || url.includes('.ogv') || url.includes('.mov') || url.includes('.webm');
-            return !this.isEmbeddable && isVideo;
-        },
-
         providers() {
             return this.meta.providers;
         }

From 560c3fbd6e70a47dc988250133ab8014a7101c86 Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Wed, 18 Mar 2026 17:17:36 -0700
Subject: [PATCH 26/29] tidy

---
 .../components/fieldtypes/VideoFieldtype.vue  |  4 ++-
 src/Fieldtypes/Video.php                      | 25 +++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 1132b3f0774..760af32291f 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -23,8 +23,10 @@
 
         <ui-input
             v-else
-            :model-value="videoId"
+            :aria-label="__('Video ID')"
+            input-class="border-s-0"
             :isReadOnly="isReadOnly"
+            :model-value="videoId"
             :prepend="__('ID')"
             @update:model-value="detailsFromCloudflare"
         />
diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index c262b109d8f..530020d6c62 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -26,17 +26,20 @@ public function augment($value)
 
     public function preload()
     {
-        $providers = new Providers();
-
-        $video = VideoDetails::fromUrl($this->field()->value());
-
-        /** @todo Fetch these from some repository so folks can add their own */
-        return [
-            'embed' => $video->embed,
-            'provider' => $video->provider,
-            'providers' => $providers->get(),
+        $meta = [
+            'providers' => Providers::get(),
             'url' => cp_route('video.details'),
         ];
+
+        if (! is_null($url = $this->field()->value())) {
+            $video = VideoDetails::fromUrl($url);
+
+            /** @todo Fetch these from some repository so folks can add their own */
+            $meta['embed'] = $video->embed;
+            $meta['provider'] = $video->provider;
+        }
+
+        return $meta;
     }
 
     protected function configFieldItems(): array
@@ -68,9 +71,9 @@ protected function configFieldItems(): array
 
 class Providers extends SlimProviderCollection
 {
-    public function get(): array
+    public static function get(): array
     {
-        return collect($this->providers)
+        return collect((new static())->providers)
             ->unique()
             ->values()
             ->map(fn (string $class) => ['provider' => class_basename($class)])

From 5f5d215661e9908b9785e5e1b5f90ba9bdfaf62c Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Thu, 19 Mar 2026 13:06:49 -0700
Subject: [PATCH 27/29] tidy

---
 src/Fieldtypes/Video.php                      | 20 ++----------------
 src/Fieldtypes/Video/Providers.php            | 21 +++++++++++++++++++
 src/Fieldtypes/Video/Video.php                |  9 ++++++++
 .../Fieldtypes/VideoFieldtypeController.php   | 16 +++-----------
 4 files changed, 35 insertions(+), 31 deletions(-)
 create mode 100644 src/Fieldtypes/Video/Providers.php

diff --git a/src/Fieldtypes/Video.php b/src/Fieldtypes/Video.php
index 530020d6c62..6272dd07c10 100644
--- a/src/Fieldtypes/Video.php
+++ b/src/Fieldtypes/Video.php
@@ -2,8 +2,8 @@
 
 namespace Statamic\Fieldtypes;
 
-use Embera\ProviderCollection\SlimProviderCollection;
 use Statamic\Fields\Fieldtype;
+use Statamic\Fieldtypes\Video\Providers;
 use Statamic\Fieldtypes\Video\Video as VideoDetails;
 
 class Video extends Fieldtype
@@ -21,7 +21,7 @@ public function augment($value)
         }
 
         //otherwise assume it's a Cloudflare ID
-        return str($value)->afterLast('::')->value();
+        return str($value)->afterLast(':')->value();
     }
 
     public function preload()
@@ -68,19 +68,3 @@ protected function configFieldItems(): array
         ];
     }
 }
-
-class Providers extends SlimProviderCollection
-{
-    public static function get(): array
-    {
-        return collect((new static())->providers)
-            ->unique()
-            ->values()
-            ->map(fn (string $class) => ['provider' => class_basename($class)])
-            ->add(['provider' => 'Cloudflare'])
-            ->sortBy('provider')
-            ->add(['provider' => 'Not Supported'])
-            ->values()
-            ->all();
-    }
-}
diff --git a/src/Fieldtypes/Video/Providers.php b/src/Fieldtypes/Video/Providers.php
new file mode 100644
index 00000000000..922c60c4ecc
--- /dev/null
+++ b/src/Fieldtypes/Video/Providers.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Statamic\Fieldtypes\Video;
+
+use Embera\ProviderCollection\SlimProviderCollection;
+
+class Providers extends SlimProviderCollection
+{
+    public static function get(): array
+    {
+        return collect((new static())->providers)
+            ->unique()
+            ->values()
+            ->map(fn (string $class) => ['provider' => class_basename($class)])
+            ->add(['provider' => 'Cloudflare'])
+            ->sortBy('provider')
+            ->add(['provider' => 'Not Supported'])
+            ->values()
+            ->all();
+    }
+}
diff --git a/src/Fieldtypes/Video/Video.php b/src/Fieldtypes/Video/Video.php
index 8a78137d13b..22dd0cc5aa2 100644
--- a/src/Fieldtypes/Video/Video.php
+++ b/src/Fieldtypes/Video/Video.php
@@ -6,11 +6,20 @@
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Fluent;
+use Illuminate\Support\Str;
 
 class Video implements Arrayable
 {
     public static function fromUrl(string $url): self
     {
+        if (Str::startsWith($url, 'cloudflare:')) {
+            $id = Str::after($url, 'cloudflare:');
+            $embedUrl = "https://iframe.cloudflarestream.com/{$id}";
+            $iframe = "<iframe src='$embedUrl' frameborder='0' allow='fullscreen' style='height: 100%; width: 100%;'></iframe>";
+
+            return new self(id: $id, provider: 'Cloudflare', embed: $iframe);
+        }
+
         if (empty($details = (new Embera(['responsive' => true]))->getUrlData($url))) {
             return static::notSupported();
         }
diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index 9c9f4fb7c9e..ec9b8e5b938 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -10,23 +10,13 @@ class VideoFieldtypeController extends CpController
 {
     public function details(Request $request): Video
     {
+        if (! is_null($id = $request->query('id'))) {
+            return Video::fromUrl($id);
+        }
         if (! is_null($url = $request->query('url'))) {
             return Video::fromUrl($url);
         }
 
-        if ($this->isCloudflareStream($request)) {
-            $id = $request->query('id');
-            $embedUrl = "https://iframe.cloudflarestream.com/{$id}";
-            $iframe = "<iframe src='$embedUrl' frameborder='0' allow='fullscreen' style='height: 100%; width: 100%;'></iframe>";
-
-            return new Video(id: $id, provider: 'Cloudflare', embed: $iframe);
-        }
-
         return Video::notSupported();
     }
-
-    private function isCloudflareStream(Request $request): bool
-    {
-        return $request->has('id') && $request->query('type') === 'Cloudflare';
-    }
 }

From 6ee9392aa978230b8ba61b3a3d1d8966c8bdbe3d Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Thu, 19 Mar 2026 14:18:09 -0700
Subject: [PATCH 28/29] set/show the value properly

---
 .../js/components/fieldtypes/VideoFieldtype.vue    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index 760af32291f..06eeb648738 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -48,7 +48,7 @@ export default {
             observer: null,
             provider: this.meta.provider,
             savedValue: null,
-            url: this.value,
+            url: null,
             videoId: null,
         };
     },
@@ -76,7 +76,7 @@ export default {
         detailsFromCloudflare(id) {
             if (id == null) return;
 
-            this.savedValue = `cloudflare::${id}`;
+            this.savedValue = `cloudflare:${id}`;
             this.videoId = id;
             this.url = null;
 
@@ -104,9 +104,19 @@ export default {
 
             this.update(this.savedValue);
         },
+
+        setUrlOrId() {
+            if (this.value?.startsWith('cloudflare:')) {
+                this.videoId = this.value.replace('cloudflare:','');
+                return;
+            }
+
+            this.url = this.value;
+        }
     },
 
     mounted() {
+        this.setUrlOrId();
         this.observer = new IntersectionObserver(
             (entries) => {
                 entries.forEach((entry) => {

From 6370ad298b5785e85d1acfd2c468ec0edad148bf Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Thu, 19 Mar 2026 15:44:07 -0700
Subject: [PATCH 29/29] Tests

---
 .../Fieldtypes/VideoFieldtypeController.php   |  1 +
 .../VideoFieldtypeControllerTest.php          | 36 +++++++
 tests/Fieldtypes/Video/ProvidersTest.php      | 18 ++++
 tests/Fieldtypes/Video/VideoTest.php          | 29 ++++++
 tests/Fieldtypes/VideoTest.php                | 93 +++++++++++++++++++
 5 files changed, 177 insertions(+)
 create mode 100644 tests/CP/Controllers/Fieldtypes/VideoFieldtypeControllerTest.php
 create mode 100644 tests/Fieldtypes/Video/ProvidersTest.php
 create mode 100644 tests/Fieldtypes/Video/VideoTest.php
 create mode 100644 tests/Fieldtypes/VideoTest.php

diff --git a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
index ec9b8e5b938..262edc8837b 100644
--- a/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
+++ b/src/Http/Controllers/CP/Fieldtypes/VideoFieldtypeController.php
@@ -13,6 +13,7 @@ public function details(Request $request): Video
         if (! is_null($id = $request->query('id'))) {
             return Video::fromUrl($id);
         }
+
         if (! is_null($url = $request->query('url'))) {
             return Video::fromUrl($url);
         }
diff --git a/tests/CP/Controllers/Fieldtypes/VideoFieldtypeControllerTest.php b/tests/CP/Controllers/Fieldtypes/VideoFieldtypeControllerTest.php
new file mode 100644
index 00000000000..6d661d31f5a
--- /dev/null
+++ b/tests/CP/Controllers/Fieldtypes/VideoFieldtypeControllerTest.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Tests\CP\Controllers\Fieldtypes;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\User;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class VideoFieldtypeControllerTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    #[Test]
+    #[DataProvider('valuesProvider')]
+    public function it_creates_a_video(array $queryParams, array $video)
+    {
+        $user = tap(User::make()->makeSuper())->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('video.details', $queryParams))
+            ->assertOK()
+            ->assertJson($video, $strict = true);
+    }
+
+    public static function valuesProvider()
+    {
+        return [
+            [[], ['embed' => null, 'id' => null, 'provider' => 'Not Supported']],
+            [['url' => 'https://www.youtube.com/watch?v=FK3dav4bA4s'], ['id' => null, 'provider' => 'Youtube']],
+            [['id' => 'cloudflare:1234'], ['id' => '1234', 'provider' => 'Cloudflare']],
+        ];
+    }
+}
diff --git a/tests/Fieldtypes/Video/ProvidersTest.php b/tests/Fieldtypes/Video/ProvidersTest.php
new file mode 100644
index 00000000000..fefd20709de
--- /dev/null
+++ b/tests/Fieldtypes/Video/ProvidersTest.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Tests\Fieldtypes\Video;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fieldtypes\Video\Providers;
+use Tests\TestCase;
+
+class ProvidersTest extends TestCase
+{
+    #[Test]
+    public function it_gets_providers()
+    {
+        $providers = Providers::get();
+
+        $this->assertSame('Cloudflare', $providers[0]['provider']);
+    }
+}
diff --git a/tests/Fieldtypes/Video/VideoTest.php b/tests/Fieldtypes/Video/VideoTest.php
new file mode 100644
index 00000000000..80cb83693d9
--- /dev/null
+++ b/tests/Fieldtypes/Video/VideoTest.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Tests\Fieldtypes\Video;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fieldtypes\Video\Video;
+use Tests\TestCase;
+
+class VideoTest extends TestCase
+{
+    #[Test]
+    #[DataProvider('valuesProvider')]
+    public function it_creates_video($provider, $id, $url)
+    {
+        $video = Video::fromUrl($url);
+
+        $this->assertSame($provider, $video->provider);
+        $this->assertSame($id, $video->id);
+    }
+
+    public static function valuesProvider()
+    {
+        return [
+            ['Youtube', null, 'https://www.youtube.com/watch?v=FK3dav4bA4s'],
+            ['Cloudflare', '1234', 'cloudflare:1234'],
+        ];
+    }
+}
diff --git a/tests/Fieldtypes/VideoTest.php b/tests/Fieldtypes/VideoTest.php
new file mode 100644
index 00000000000..4bf62e4a891
--- /dev/null
+++ b/tests/Fieldtypes/VideoTest.php
@@ -0,0 +1,93 @@
+<?php
+
+namespace Tests\Fieldtypes;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fields\Field;
+use Statamic\Fieldtypes\Text;
+use Statamic\Fieldtypes\Video;
+use Tests\TestCase;
+
+class VideoTest extends TestCase
+{
+    #[Test]
+    public function it_preloads_empty_field()
+    {
+        $fieldtype = (new Video)->setField(new Field('test', ['type' => 'video']));
+
+        $meta = $fieldtype->preload();
+
+        $this->assertSame('Cloudflare', $meta['providers'][0]['provider']);
+        $this->assertFalse(isset($meta['provider']));
+    }
+
+    #[Test]
+    #[DataProvider('preloadValuesProvider')]
+    public function it_preloads_with_value($provider, $value)
+    {
+        $fieldtype = tap(new Video, fn (Video $v) => $v
+            ->setField(new Field('test', ['type' => 'video']))
+            ->field()->setValue($value)
+        );
+
+        $this->assertSame($provider, $fieldtype->preload()['provider']);
+    }
+
+    public static function preloadValuesProvider()
+    {
+        return [
+            ['Youtube', 'https://www.youtube.com/watch?v=FK3dav4bA4s'],
+            ['Cloudflare', 'cloudflare:1234'],
+        ];
+    }
+
+    #[Test]
+    #[DataProvider('processValuesProvider')]
+    public function it_processes_values($mode, $values)
+    {
+        $field = (new Text)->setField(new Field('test', [
+            'type' => 'text',
+            'input_type' => $mode,
+        ]));
+
+        $this->assertSame($values[0], $field->process('test'));
+        $this->assertSame($values[1], $field->process('3'));
+        $this->assertSame($values[2], $field->process('3test'));
+        $this->assertSame($values[3], $field->process('3.14'));
+        $this->assertSame($values[4], $field->process(null));
+    }
+
+    public static function processValuesProvider()
+    {
+        return [
+            'text' => ['text', ['test', '3', '3test', '3.14', null]],
+            'number' => ['number', [0, 3, 3, 3.14, null]],
+        ];
+    }
+
+    #[Test]
+    #[DataProvider('preProcessIndexProvider')]
+    public function it_pre_processes_index_values($config, $value, $expected)
+    {
+        $field = (new Text)->setField(new Field('test', array_merge([
+            'type' => 'text',
+        ], $config)));
+
+        $this->assertSame($expected, $field->preProcessIndex($value));
+    }
+
+    public static function preProcessIndexProvider()
+    {
+        return [
+            'string value' => [[], 'hello', 'hello'],
+            'null value' => [[], null, null],
+            'zero integer' => [[], 0, '0'],
+            'zero string' => [[], '0', '0'],
+            'zero with prepend' => [['prepend' => '$'], 0, '$0'],
+            'zero with append' => [['append' => '%'], 0, '0%'],
+            'zero with prepend and append' => [['prepend' => '$', 'append' => '%'], 0, '$0%'],
+            'string with prepend' => [['prepend' => '$'], 'hello', '$hello'],
+        ];
+    }
+}