From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 4 Aug 2021 15:38:37 +0000 (+0200)
Subject: docs: add vue mastery video
X-Git-Tag: v4.0.11~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=234f57763f7942c9e3a9c5e2a3ae1df34bee5aa6;p=thirdparty%2Fvuejs%2Frouter.git

docs: add vue mastery video
---

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