From 35a49b3d62e8fda3f048c24d27ea2017252c9aae Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 13 Jan 2026 09:55:55 +0000
Subject: [PATCH] Only load video embed when field becomes visible

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

diff --git a/resources/js/components/fieldtypes/VideoFieldtype.vue b/resources/js/components/fieldtypes/VideoFieldtype.vue
index ade6098a872..848a08d4fbf 100644
--- a/resources/js/components/fieldtypes/VideoFieldtype.vue
+++ b/resources/js/components/fieldtypes/VideoFieldtype.vue
@@ -16,10 +16,12 @@
         <ui-description v-if="isInvalid" class="text-red-600">{{ __('statamic::validation.url') }}</ui-description>
         <iframe
             v-if="shouldShowPreview"
-            :src="embedUrl"
+            ref="iframe"
+            :src="isVisible ? embedUrl : null"
             frameborder="0"
             allow="fullscreen"
             class="aspect-video rounded-lg"
+            loading="lazy"
         ></iframe>
     </div>
 </template>
@@ -30,6 +32,13 @@ import Fieldtype from './Fieldtype.vue';
 export default {
     mixins: [Fieldtype],
 
+    data() {
+        return {
+            isVisible: false,
+            observer: null,
+        };
+    },
+
     computed: {
         shouldShowPreview() {
             return !this.isInvalid && (this.isEmbeddable || this.isVideo);
@@ -87,5 +96,29 @@ export default {
             return !this.isEmbeddable && isVideo;
         },
     },
+
+    mounted() {
+        this.observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting && entry.intersectionRatio > 0) {
+                        this.isVisible = true;
+                        this.observer.disconnect();
+                    }
+                });
+            },
+            { threshold: 0.01 }
+        );
+
+        if (this.$el) {
+            this.observer.observe(this.$el);
+        }
+    },
+
+    beforeUnmount() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    },
 };
 </script>