From 234f57763f7942c9e3a9c5e2a3ae1df34bee5aa6 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 4 Aug 2021 17:38:37 +0200
Subject: [PATCH] docs: add vue mastery video

---
 .../.vitepress/components/VueMasteryVideo.vue | 52 +++++++++++++++++++
 docs/guide/index.md                           | 10 ++++
 2 files changed, 62 insertions(+)
 create mode 100644 docs/.vitepress/components/VueMasteryVideo.vue

diff --git a/docs/.vitepress/components/VueMasteryVideo.vue b/docs/.vitepress/components/VueMasteryVideo.vue
new file mode 100644
index 00000000..5e43b420
--- /dev/null
+++ b/docs/.vitepress/components/VueMasteryVideo.vue
@@ -0,0 +1,52 @@
+<template>
+  <a href="#" role="button" @click.prevent="open" ref="el">
+    <img :src="img" :alt="title" style="border-radius: 6px" />
+  </a>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: 'Get started with Vue Router',
+  },
+  img: {
+    type: String,
+    required: true,
+  },
+  url: {
+    type: String,
+    required: true,
+  },
+})
+
+const isOpened = ref(false)
+const el = ref<HTMLElement>()
+
+function open() {
+  // dropped v-if/v-else way to fix autoplay issue on Chrome
+  // https://github.com/vuejs/vuex/pull/1453#issuecomment-441507095
+  isOpened.value = true
+  const element = el.value
+  if (!element || !element.parentNode) {
+    return
+  }
+  const attrs = {
+    width: '640',
+    height: '360',
+    frameborder: '0',
+    src: props.url + '?autoplay=1',
+    webkitallowfullscreen: 'true',
+    mozallowfullscreen: 'true',
+    allowfullscreen: 'true',
+  }
+  const video = document.createElement('iframe')
+  for (const name in attrs) {
+    video.setAttribute(name, attrs[name as keyof typeof attrs])
+  }
+  element.parentNode.replaceChild(video, element)
+}
+</script>
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 5f6f9839..10244d78 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -1,5 +1,15 @@
 # Getting Started
 
+<VueMasteryVideo
+  title="Get Started with Vue Router"
+  url="https://player.vimeo.com/video/548250062"
+  img="https://i.vimeocdn.com/video/1201118933_640"
+/>
+
+<script setup>
+  import VueMasteryVideo from '../.vitepress/components/VueMasteryVideo.vue'
+  </script>
+
 Creating a Single-page Application with Vue + Vue Router feels natural: with Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example:
 
 ## HTML
-- 
2.47.2