fix: 影片改縮圖連結避免廣告

member/kim-jaeduck-fan-site.html

@@ -172,17 +172,45 @@
       background: #d8cbae;
     }
 
-    .hero-photo iframe {
+    .hero-photo a.hero-video-link {
+      display: block;
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .hero-photo a.hero-video-link img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center
+    }
+
+    .hero-photo .play {
       position: absolute;
       top: 50%;
       left: 50%;
-      width: 100%;
+      width: 64px;
-      height: 100%;
+      height: 64px;
-      min-width: 177.78vh;
+      border-radius: 50%;
-      min-height: 56.25vw;
+      background: rgba(255, 255, 255, .92);
+      display: flex;
+      align-items: center;
+      justify-content: center;
       transform: translate(-50%, -50%);
-      border: 0;
+      transition: transform .2s ease;
-      pointer-events: none;
+    }
+
+    .hero-photo .play::after {
+      content: "";
+      border-left: 16px solid #161310;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      margin-left: 5px
+    }
+
+    .hero-photo a.hero-video-link:hover .play {
+      transform: translate(-50%, -50%) scale(1.08)
     }
 
     .hero-photo .cap {
@@ -715,9 +743,12 @@
           <span class="tag">KIM JAEDUCK</span>
         </div>
         <div class="hero-photo">
-          <iframe
+          <a class="hero-video-link" href="https://youtu.be/m7Zt_p9S-yg?t=179" target="_blank" rel="noopener noreferrer"
-            src="https://www.youtube.com/embed/m7Zt_p9S-yg?start=179&autoplay=1&mute=1&loop=1&playlist=m7Zt_p9S-yg&controls=0&modestbranding=1&rel=0&showinfo=0&playsinline=1&iv_load_policy=3"
+            aria-label="前往 YouTube 觀看完整片段">
-            title="金在德舞台片段" allow="autoplay; encrypted-media" loading="lazy"></iframe>
+            <img src="https://img.youtube.com/vi/m7Zt_p9S-yg/maxresdefault.jpg" alt="金在德舞台片段"
+              onerror="this.onerror=null;this.src='https://img.youtube.com/vi/m7Zt_p9S-yg/hqdefault.jpg'">
+            <span class="play"></span>
+          </a>
           <span class="cap">BLACK KIES · RAP / DANCE</span>
         </div>
       </div>