docs: replaced video preview code to a VideoPreview component (#1453)

* replaced video preview code to a VideoPreview component

* docs: dropped v-if/v-else way to fix video autoplay issue on Chrome

docs/.vuepress/components/VideoPreview.vue

@@ -0,0 +1,48 @@
+<template>
+  <a href="#" @click.prevent="open">
+    <img :src="img" :alt="title" style="border-radius: 6px;">
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "Play Vuex Explained Visually Video"
+    },
+    img: {
+      type: String,
+      default: "/vuex-explained-visually.png"
+    },
+    url: {
+      type: String,
+      default: "https://player.vimeo.com/video/297515936?autoplay=1"
+    }
+  },
+  methods: {
+    open() {
+      // dropped v-if/v-else way to fix autoplay issue on Chrome
+      // https://github.com/vuejs/vuex/pull/1453#issuecomment-441507095
+      const { $el, url } = this;
+      if (!$el || !$el.parentNode) {
+        return;
+      }
+      const attrs = {
+        width: 640,
+        height: 360,
+        frameborder: 0,
+        src: url,
+        webkitallowfullscreen: true,
+        mozallowfullscreen: true,
+        allowfullscreen: true
+      };
+      const video = document.createElement('iframe');
+      for (const name in attrs) {
+        video.setAttribute(name, attrs[name]);
+      }
+      $el.parentNode.replaceChild(video, $el);
+    }
+  }
+}
+</script>

docs/README.md

@@ -1,6 +1,6 @@
 # What is Vuex?
 
-<a id="vuex-video-preview" href="javascript:var vuexVideoPreviewEl = document.getElementById('vuex-video-preview'); var videoWrapperEl = document.createElement('div'); videoWrapperEl.innerHTML = '<iframe src=&quot;https://player.vimeo.com/video/297515936?autoplay=1&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; vuexVideoPreviewEl.parentNode.insertBefore(videoWrapperEl, vuexVideoPreviewEl); vuexVideoPreviewEl.parentNode.removeChild(vuexVideoPreviewEl)"><img src="/vuex-explained-visually.png" alt="Play Vuex Explained Visually Video" style="border-radius: 6px;"></a>
+<VideoPreview />
 
 Vuex is a **state management pattern + library** for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.