Load src of youtube iframe, when page is loaded

Author: MarcelGeo

src/.vitepress/components/YouTube.vue

@@ -1,25 +1,42 @@
 <template>
   <div>
-    <iframe type="text/html" width="100%" style="height:100%"
-            :src="`https://www.youtube.com/embed/${id}`"
-            frameborder="0" allowfullscreen></iframe>
+    <iframe
+      type="text/html"
+      width="100%"
+      style="height: 100%"
+      src=""
+      frameborder="0"
+      allowfullscreen
+      ref="iframe"
+    ></iframe>
   </div>
 </template>
 
 <script setup>
-defineProps({
+import { onMounted, ref } from "vue";
+
+const props = defineProps({
   id: {
     type: String,
-    required: true
-  }
-})
+    required: true,
+  },
+});
+const iframe = ref(null);
+
+onMounted(() => {
+  window.onload = () => {
+    if (iframe.value) {
+      iframe.value.src = `https://www.youtube.com/embed/${props.id}`;
+    }
+  };
+});
 </script>
 
 <style scoped>
 div {
   background-color: #2c3e50;
   width: 100%;
-  padding-top: min(500px,56%);
+  padding-top: min(500px, 56%);
   position: relative;
   border: 3px solid #eaecef;
 }
@@ -30,6 +47,5 @@ iframe {
   left: 0;
   bottom: 0;
   right: 0;
-
 }
-</style>
+</style>