修改youtube视频的播放方式, 不再隐藏上下部分内容

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>

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;