autoplay intro

src/.vitepress/theme/index.ts

@@ -3,14 +3,14 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme-without-fonts'  // WITHOUT fonts
 import './style.css'
-import IntroVideo from "../../components/IntroVideo.vue";
+import IntroVideoAutoplay from "../../components/IntroVideoAutoplay.vue";
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-      'home-hero-actions-after': () => h(IntroVideo),
+      'home-hero-actions-after': () => h(IntroVideoAutoplay),
     })
   },
   enhanceApp({ app, router, siteData }) {

src/components/IntroVideo.vue

@@ -1,13 +1,11 @@
 <template>
   <div style="margin-top: 1.5em; margin-bottom: 1.5em;">
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/_sqzehuqWXw?si=SY04mCk9MhiBPFLP" title="Dexorder on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    <!-- NOTE: add ?autoplay=1 to the src query string-->
+    <iframe style="display: inline-block" width="560" height="315" :src="`https://www.youtube.com/embed/${idAndSi}&autoplay=${autoplay?'1':'0'}`" title="Dexorder on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
   </div>
 </template>
 
 <script setup>
-
+const idAndSi = '_sqzehuqWXw?si=SY04mCk9MhiBPFLP'
+const props = defineProps({autoplay: {type: Boolean, default: false}})
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/components/IntroVideoAutoplay.vue

@@ -0,0 +1,7 @@
+<template>
+  <intro-video autoplay/>
+</template>
+
+<script setup>
+import IntroVideo from "./IntroVideo.vue";
+</script>