From f7141704a27e4d1708030d333d51ec482b20b7ef Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Wed, 27 Apr 2022 10:44:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9youtube=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E7=9A=84=E6=92=AD=E6=94=BE=E6=96=B9=E5=BC=8F,=20=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E9=9A=90=E8=97=8F=E4=B8=8A=E4=B8=8B=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                        |  1 -
 src/components/gameplay/VideoSection.vue | 25 ++++++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 873b56c..69b6d5f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,6 @@
         html * {font-family: 'Rajdhani',serif;font-weight: bold;}
         body{overflow-x: hidden;scrollbar-width: none;}
         ::-webkit-scrollbar {width: 0 !important;height: 0;display: none;}
-        .video-youtube-202202 iframe{margin-top: -110px;}
         .video-youtube-202202.mobile iframe{margin-top: -9vw;}
     </style>
   </head>
diff --git a/src/components/gameplay/VideoSection.vue b/src/components/gameplay/VideoSection.vue
index 8deb596..9073c21 100644
--- a/src/components/gameplay/VideoSection.vue
+++ b/src/components/gameplay/VideoSection.vue
@@ -2,7 +2,7 @@
   <div class="video-section" :class="{'mobile': mobile}">
     <div class="video-bg"></div>
     <div class="video-cover">
-      <img src="@/assets/202202/gameplay/video.jpg" alt="video">
+      <img :class="{'blur': playing}" src="@/assets/202202/gameplay/video.jpg" alt="video">
     </div>
     <you-tube-player
       v-show="videoShow"
@@ -14,6 +14,7 @@
       :player-height="videoHeight"
       @ready="videoReady"
       @ended="videoEnded"
+      @playing="videoPlaying"
     ></you-tube-player>
     <div class="play-btn" @click="showVideo" v-show="!videoShow"></div>
   </div>
@@ -32,8 +33,9 @@ import Youtube, { YouTubePlayer } from 'vue-youtube-embed'
 export default class extends Vue {
   private videoShow = false
   private videoPlayer: any
-  private videoWidth = 1280
-  private videoHeight = 720
+  private videoWidth = 888
+  private videoHeight = 500
+  private playing = false
   private playerVars = {
     autoplay: 0,
     mute: 1,
@@ -47,10 +49,11 @@ export default class extends Vue {
 
   mounted() {
     // {375, 146}
+    // 640 x 360
     const winWidth = window.innerWidth
     const mHeight = 211 * (winWidth / 375)
-    this.videoWidth = this.mobile ? winWidth : 1280
-    this.videoHeight = this.mobile ? mHeight : 720
+    this.videoWidth = this.mobile ? winWidth : 888
+    this.videoHeight = this.mobile ? mHeight : 500
   }
 
   get mobile() {
@@ -64,6 +67,10 @@ export default class extends Vue {
     // event.target.playVideo()
   }
 
+  videoPlaying(event: any) {
+    this.playing = true
+  }
+
   videoEnded(event: any) {
     console.log('video end')
     event.target.mute()
@@ -113,9 +120,15 @@ export default class extends Vue {
     top:0;
     right: 0;
     filter: brightness(0.5);
+    //overflow: hidden;
     &:hover {
       filter: brightness(1);
     }
+    img{
+      &.blur{
+        filter: blur(20px);
+      }
+    }
   }
   .play-btn{
     position: absolute;
@@ -133,7 +146,7 @@ export default class extends Vue {
     cursor: pointer;
   }
   .video-youtube-202202{
-    width: 1280px;
+    width: 888px;
     height: 500px;
     margin: auto;
     position: absolute;