update carousel

layouts/partials/components/carousel.html

@@ -3,9 +3,15 @@
     <div class="swiper-wrapper">
       <div class="swiper-slide">
         <a href="https://www.facebook.com/Ariel0702/?locale=zh_TW" target="_blank">
-          <img src="/imgs/home/banner-main.jpg"
+          <img src="/imgs/home/banner-main-01.png"
             alt="陳斐娟｜克隆娟｜三立iNEWS｜AI Spokesperson｜choozmo｜AI主播｜AI｜AI建模｜虛擬主播｜人工智慧｜客製化主播｜最新服務｜英文AI主播｜AI 虛擬主播｜生成式 AI技術｜Facelandmark｜deeplearning">
+            <img src="/imgs/home/banner-main-02.png" alt="" class="person-img">
         </a>
+
+        <div class="player-item">
+          <div id="player"></div>
+        </div>
+
       </div>
       <div class="swiper-slide">
         <a target="_blank" href="/main-news/警察廣播電台初次ai主播真人建模-與choozmo合作ai影片/">
@@ -52,6 +58,52 @@
 </div>
 
 <script>
+  // 載入 YouTube API
+  let tag = document.createElement('script');
+  tag.src = 'https://www.youtube.com/iframe_api';
+  let firstScriptTag = document.getElementsByTagName('script')[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  // 在 API 載入完成後建立影片播放器
+  let player;
+  function onYouTubeIframeAPIReady() {
+    player = new YT.Player('player', {
+      videoId: 'vS8D5h7oUU0',  // YouTube 影片 ID
+      playerVars: {
+        'autoplay': 0,  // 不自動播放
+        'controls': 1,  // 顯示播放控制項
+        'showinfo': 0,  // 隱藏影片標題
+        'rel': 0,  // 不顯示相關影片推薦
+      },
+      events: {
+        'onReady': onPlayerReady
+      }
+    });
+  }
+
+  // 設定封面圖片
+  function onPlayerReady(event) {
+    // 隱藏影片播放器
+    event.target.mute();
+
+    // 在影片上放封面圖片 div
+    let posterDiv = document.createElement('div');
+    let playerItem = document.querySelector('.player-item');
+    posterDiv.classList.add('poster');
+    event.target.getIframe().parentNode.insertBefore(posterDiv, event.target.getIframe());
+
+    setTimeout(() => {
+      playerItem.style.opacity = '1';
+    }, 100);
+
+    posterDiv.addEventListener('click', function () {
+      posterDiv.style.display = 'none';  // 隱藏封面圖片
+      event.target.unMute();
+      event.target.setVolume(100);
+      event.target.playVideo();
+    });
+  }
+
   function setFrame(select) {
     let val = select.value;
     if (val === "國語") {

static/css/style.css

@@ -4230,6 +4230,56 @@
     padding: 2px 0px;
   }
 }
+.carousel-wrapper .carousel .person-img {
+  width: 25vw;
+  position: absolute;
+  bottom: 0;
+  left: 43vw;
+  z-index: 100;
+}
+@media (max-width: 767px) {
+  .carousel-wrapper .carousel .person-img {
+    width: 35vw;
+    left: 57vw;
+  }
+}
+.carousel-wrapper .carousel .player-item {
+  position: absolute;
+  top: 15vw;
+  left: 6vw;
+  opacity: 0;
+}
+@media (max-width: 767px) {
+  .carousel-wrapper .carousel .player-item {
+    top: 22vw;
+    left: 10vw;
+  }
+}
+.carousel-wrapper .carousel .player-item iframe {
+  width: 100%;
+  height: 100%;
+}
+.carousel-wrapper .carousel .player-item .poster {
+  background-image: url("/imgs/home/video-img.png");
+  background-size: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+.carousel-wrapper .carousel .player-item,
+.carousel-wrapper .carousel .player-item .poster {
+  width: 35vw;
+  height: 20vw;
+}
+@media (max-width: 767px) {
+  .carousel-wrapper .carousel .player-item,
+  .carousel-wrapper .carousel .player-item .poster {
+    width: 45vw;
+    height: 25vw;
+  }
+}
 
 /* carousel End */
 /* news-content Start */

static/css/style.scss

@@ -4640,6 +4640,60 @@
         }
       }
     }
+
+    .person-img {
+      width: 25vw;
+      position: absolute;
+      bottom: 0;
+      left: 43vw;
+      z-index: 100;
+
+      @media (max-width: 767px) {
+        width: 35vw;
+        left: 57vw;
+      }
+    }
+
+    .player-item {
+      position: absolute;
+      top: 15vw;
+      left: 6vw;
+      opacity: 0;
+
+      @media (max-width: 767px) {
+        top: 22vw;
+        left: 10vw;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+
+      .poster {
+        background-image: url("/imgs/home/video-img.png");
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        cursor: pointer;
+      }
+    }
+
+    .player-item {
+
+      &,
+      .poster {
+        width: 35vw;
+        height: 20vw;
+
+        @media (max-width: 767px) {
+          width: 45vw;
+          height: 25vw;
+        }
+      }
+    }
   }
 }