feat: added VueMastery modal to introduction

Author: NataliaTepluhina

src/.vuepress/components/common/vuemastery-video-modal.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="overlay" v-show="isOpen">
     <div ref="modal" class="modal" :class="{ open: isOpen }">
-      <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;">
+      <div
+        class="video-space"
+        style="padding: 56.25% 0 0 0; position: relative;"
+      >
         <iframe
           src="https://player.vimeo.com/video/455611549?dnt=1"
           style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"
           frameborder="0"
           webkitallowfullscreen
           mozallowfullscreen
           allowfullscreen
+          allow="autoplay"
           ref="videoIframe"
         ></iframe>
       </div>
@@ -20,14 +24,15 @@
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Vue Mastery</a>.
-        Watch Vue Mastery’s free
+          >Vue Mastery</a
+        >. Watch Vue Mastery’s free
         <a
           href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3"
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Intro to Vue course</a>.
+          >Intro to Vue course</a
+        >.
       </p>
     </div>
   </div>
@@ -47,7 +52,7 @@ export default {
   }),
 
   methods: {
-    initVideoModal () {
+    initVideoModal() {
       const modalButton = document.querySelector(this.triggerSelector)
       const player = new Vimeo.Player(this.$refs.videoIframe)
 
@@ -59,7 +64,11 @@ export default {
       })
 
       document.body.addEventListener('click', event => {
-        if (this.isOpen && event.target !== modalButton && !this.$refs.modal.contains(event.target)) {
+        if (
+          this.isOpen &&
+          event.target !== modalButton &&
+          !this.$refs.modal.contains(event.target)
+        ) {
           this.isOpen = false
           document.body.classList.remove('stop-scroll')
           player.pause()
@@ -68,7 +77,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     if (typeof window !== 'undefined') {
       this.initVideoModal()
     }
@@ -77,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@theme/styles/_settings.scss";
+@import '@theme/styles/_settings.scss';
 
 .modal {
   box-sizing: border-box;

src/guide/introduction.md

@@ -8,9 +8,9 @@ Already know Vue 2 and just want to learn about what's new in Vue 3? Check out t
 
 Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](../guide/single-file-component.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries).
 
-If you’d like to learn more about Vue before diving in, we <a id="modal-player"  href="#">created a video</a> walking through the core principles and a sample project.
+If you’d like to learn more about Vue before diving in, we <a id="modal-player" class="vuemastery-trigger"  href="#">created a video</a> walking through the core principles and a sample project.
 
-If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](TODO:comparison.html).
+<common-vuemastery-video-modal/>
 
 ## Getting Started