diff --git a/public/index.html b/public/index.html
index 209073f..298f1ee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,6 +37,10 @@
         ::-webkit-scrollbar {
             width: 0 !important;height: 0;
         }
+
+        .video-youtube-202202 iframe{
+            margin-top: -110px;
+        }
     </style>
   </head>
   <body>
diff --git a/src/assets/202202/gameplay/video.png b/src/assets/202202/gameplay/video.png
new file mode 100644
index 0000000..93ecd43
Binary files /dev/null and b/src/assets/202202/gameplay/video.png differ
diff --git a/src/components/gameplay/VideoSection.vue b/src/components/gameplay/VideoSection.vue
index c57ab23..9346dfa 100644
--- a/src/components/gameplay/VideoSection.vue
+++ b/src/components/gameplay/VideoSection.vue
@@ -1,8 +1,20 @@
 <template>
   <div class="video-section">
+    <div class="video-bg"></div>
     <div class="video-cover">
-
+      <img src="@/assets/202202/gameplay/video.png" alt="video">
     </div>
+    <youtube
+      v-show="videoShow"
+      class="video-youtube-202202"
+      video-id="_SZ5pVCxmro"
+      :player-vars="playerVars"
+      player-width="1280"
+      player-height="720"
+      @ready="videoReady"
+      @ended="videoEnded"
+    ></youtube>
+    <div class="play-btn" @click="showVideo" v-show="!videoShow"></div>
   </div>
 </template>
 <script lang="ts">
@@ -13,13 +25,99 @@ import { Component, Vue } from 'vue-property-decorator'
   components: {
   }
 })
-export default class extends Vue {}
+export default class extends Vue {
+  private videoShow = false
+  private videoPlayer: any
+  private playerVars = {
+    autoplay: 1,
+    mute: 1,
+    loop: 1,
+    controls: 0
+  }
+
+  videoReady(event: any) {
+    console.log('video ready')
+    this.videoPlayer = event.target
+    // event.target.mute()
+    // event.target.playVideo()
+  }
+
+  videoEnded(event: any) {
+    console.log('video end')
+    event.target.mute()
+    event.target.playVideo()
+  }
+
+  showVideo() {
+    this.videoShow = true
+    this.videoPlayer.playVideo()
+  }
+}
 </script>
 <style lang="scss" scoped>
 .video-section{
+  position: relative;
+  margin-bottom: 50px;
+  max-width: 1920;
+  height: 500px;
+  .video-bg{
+    width:100%;
+    height: 450px;
+    position: absolute;
+    left:0;
+    top:0;
+    background-image: url('../../assets/202202/gameplay/video.png');
+    background-repeat: no-repeat;
+    background-position: top center;;
+    background-size: 100% 100%;
+    overflow: hidden;
+    &:after{
+      content: "";
+      width:150%;
+      height:150%;
+      position: absolute;
+      left:0;
+      top:0;
+      background: inherit;
+      filter: blur(35px);
+    }
+  }
   .video-cover{
     width: 1280px;
     height: 500px;
+    margin: auto;
+    position: absolute;
+    left:0;
+    top:0;
+    right: 0;
+    filter: brightness(0.5);
+    &:hover {
+      filter: brightness(1);
+    }
+  }
+  .play-btn{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 162px;
+    height: 162px;
+    margin: auto;
+    background-image: url('../../assets/202202/gameplay/icon_play.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+  }
+  .video-youtube-202202{
+    width: 1280px;
+    height: 500px;
+    margin: auto;
+    position: absolute;
+    left:0;
+    top:0;
+    right: 0;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index a121084..1e832ad 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,10 +6,10 @@ import router from './router'
 import store from './store'
 import VueClipboard from 'vue-clipboard2'
 // import 'video.js/dist/video-js.css'
-// import VueYouTubeEmbed from 'vue-youtube-embed'
+import VueYouTubeEmbed from 'vue-youtube-embed'
 
 Vue.use(ElementUI)
-// Vue.use(VueYouTubeEmbed)
+Vue.use(VueYouTubeEmbed)
 Vue.use(VueClipboard)
 Vue.config.productionTip = false
 
