update

layouts/partials/components/carousel.html

@@ -1,7 +1,7 @@
 <div class="my-4 carousel-wrapper">
   <div class="swiper carousel">
     <div class="swiper-wrapper">
-      <div class="swiper-slide">
+      <!-- <div class="swiper-slide">
         <div class="toggle-video">
           <select onchange="setEwinFrame(this)">
             <option value="">切換主題</option>
@@ -10,23 +10,39 @@
           </select>
         </div>
 
-          <div class="wrapper">
-            <img src="/imgs/home/底圖-07.png"
-              alt="choozmo｜AI主播｜AI｜華視｜華視團隊前進杭州 AI主播E-Win越洋連線｜杭州亞運開跑｜人工智慧｜AI人工智慧｜人工智能｜虛擬主播｜虛擬人｜新聞播報">
-            <div class="video-wrapper e-win">
-              <iframe id="yt_ewin_frame" src="https://www.youtube.com/embed/YvmyRn6e9uw?autoplay=1&mute=1"
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                allowfullscreen></iframe>
-            </div>
+        <div class="wrapper">
+          <img src="/imgs/home/底圖-07.png"
+            alt="choozmo｜AI主播｜AI｜華視｜華視團隊前進杭州 AI主播E-Win越洋連線｜杭州亞運開跑｜人工智慧｜AI人工智慧｜人工智能｜虛擬主播｜虛擬人｜新聞播報">
+          <div class="video-wrapper e-win">
+            <iframe id="yt_ewin_frame" src="https://www.youtube.com/embed/YvmyRn6e9uw?autoplay=1&mute=1"
+              title="YouTube video player" frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowfullscreen></iframe>
           </div>
+        </div>
+      </div> -->
+
+      <div class="swiper-slide">
+        <div class="toggle-video">
+          <select onchange="setEwinFrame(this)">
+            <option value="">切換主題</option>
+            <option value="0922">0922 杭州亞運開跑</option>
+            <option value="0927">0927 跆拳道表現亮眼</option>
+          </select>
+        </div>
+
+        <img src="/imgs/home/底圖-07.png"
+          alt="choozmo｜AI主播｜AI｜華視｜華視團隊前進杭州 AI主播E-Win越洋連線｜杭州亞運開跑｜人工智慧｜AI人工智慧｜人工智能｜虛擬主播｜虛擬人｜新聞播報">
+        <div class="ewin-player-item">
+          <div id="ewin-player"></div>
+        </div>
       </div>
 
       <div class="swiper-slide">
         <a href="https://www.facebook.com/Ariel0702/?locale=zh_TW" target="_blank">
           <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">
+          <img src="/imgs/home/banner-main-02.png" alt="" class="person-img">
         </a>
         <div class="player-item">
           <div id="player"></div>
@@ -87,41 +103,60 @@
 
   // 在 API 載入完成後建立影片播放器
   let player;
+  let ewinPlayer;
+
   function onYouTubeIframeAPIReady() {
-    player = new YT.Player('player', {
-      videoId: 'vS8D5h7oUU0',  // YouTube 影片 ID
+    setupPlayer('player', 'vS8D5h7oUU0'); // 克隆娟
+    setupPlayer('ewin-player', 'YvmyRn6e9uw'); // 亞運
+  }
+
+  function setupPlayer(playerId, videoId) {
+    const player = new YT.Player(playerId, {
+      videoId: videoId,
       playerVars: {
-        'autoplay': 0,  // 不自動播放
+        'autoplay': 0, // 不自動播放
         'controls': 1,  // 顯示播放控制項
-        'showinfo': 0,  // 隱藏影片標題
-        'rel': 0,  // 不顯示相關影片推薦
+        'showinfo': 0, // 隱藏影片標題
+        'rel': 0, // 不顯示相關影片推薦
       },
       events: {
-        'onReady': onPlayerReady
-      }
-    });
-  }
+        'onReady': function (event) {
+          // 隱藏影片播放器
+          event.target.mute();
 
-  // 設定封面圖片
-  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();
+          const playerItem = document.querySelector(`.${playerId}-item`);
+          const posterDiv = document.createElement('div');
+
+          let ewinDiv = document.createElement('div');
+          let playerEwinItem = document.querySelector('.ewin-player-item');
+
+          // 設定封面圖片(在影片上放封面圖片 div)
+          posterDiv.classList.add('poster'); // 克隆娟
+          event.target.getIframe().parentNode.insertBefore(posterDiv, event.target.getIframe());
+
+          ewinDiv.classList.add('ewin'); // 亞運
+          event.target.getIframe().parentNode.insertBefore(ewinDiv, event.target.getIframe());
+
+          setTimeout(() => {
+            playerItem.style.opacity = '1';
+            playerEwinItem.style.opacity = '1';
+          }, 100);
+
+          posterDiv.addEventListener('click', function () {
+            posterDiv.style.display = 'none'; // 隱藏封面圖片
+            event.target.unMute();
+            event.target.setVolume(100);
+            event.target.playVideo();
+          });
+
+          ewinDiv.addEventListener('click', function () {
+            ewinDiv.style.display = 'none'; // 隱藏封面圖片
+            event.target.unMute();
+            event.target.setVolume(100);
+            event.target.playVideo();
+          });
+        }
+      }
     });
   }
 
@@ -154,12 +189,14 @@
 
   function setEwinFrame(select) {
     let val = select.value;
-    console.log('select',select.value);
+    let player = document.querySelector('#ewin-player');
+    let ewinImg = document.querySelector('.ewin');
+    ewinImg.style.display = 'none';  // 隱藏封面圖片
 
     if (val === "0922") {
-      $('#yt_ewin_frame').attr('src', 'https://www.youtube.com/embed/YvmyRn6e9uw?autoplay=1&mute=1');
+      $('#ewin-player').attr('src', 'https://www.youtube.com/embed/YvmyRn6e9uw?autoplay=1&mute=1');
     } else if (val === "0927") {
-      $('#yt_ewin_frame').attr('src', 'https://www.youtube.com/embed/woLoY-rw2pw?autoplay=1&mute=1');
+      $('#ewin-player').attr('src', 'https://www.youtube.com/embed/woLoY-rw2pw?autoplay=1&mute=1');
     }
   }
 </script>

static/css/style.css

@@ -4337,10 +4337,20 @@
   }
 }
 .carousel-wrapper .carousel .player-item {
-  position: absolute;
   top: 15vw;
   left: 6vw;
-  opacity: 0;
+}
+.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;
+  }
 }
 @media (max-width: 767px) {
   .carousel-wrapper .carousel .player-item {
@@ -4348,31 +4358,49 @@
     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 {
+.carousel-wrapper .carousel .ewin-player-item {
+  top: 42%;
+  right: 23%;
+}
+.carousel-wrapper .carousel .ewin-player-item,
+.carousel-wrapper .carousel .ewin-player-item .ewin {
   width: 35vw;
   height: 20vw;
 }
 @media (max-width: 767px) {
-  .carousel-wrapper .carousel .player-item,
-  .carousel-wrapper .carousel .player-item .poster {
-    width: 45vw;
+  .carousel-wrapper .carousel .ewin-player-item,
+  .carousel-wrapper .carousel .ewin-player-item .ewin {
+    width: 44vw;
     height: 25vw;
   }
 }
+.carousel-wrapper .carousel .ewin-player-item .ewin {
+  background-image: url("/imgs/home/影片封面-11.png");
+}
+.carousel-wrapper .carousel .player-item,
+.carousel-wrapper .carousel .ewin-player-item {
+  position: absolute;
+  opacity: 0;
+}
+.carousel-wrapper .carousel .player-item iframe,
+.carousel-wrapper .carousel .ewin-player-item iframe {
+  width: 100%;
+  height: 100%;
+}
+.carousel-wrapper .carousel .player-item .poster,
+.carousel-wrapper .carousel .player-item .ewin,
+.carousel-wrapper .carousel .ewin-player-item .poster,
+.carousel-wrapper .carousel .ewin-player-item .ewin {
+  background-size: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+}
 
 /* carousel End */
 /* news-content Start */

static/css/style.scss

@@ -4753,44 +4753,69 @@
     }
 
     .player-item {
-      position: absolute;
       top: 15vw;
       left: 6vw;
-      opacity: 0;
+
+      &,
+      .poster {
+        width: 35vw;
+        height: 20vw;
+
+        @media (max-width: 767px) {
+          width: 45vw;
+          height: 25vw;
+        }
+      }
 
       @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 {
+    .ewin-player-item {
+      top: 42%;
+      right: 23%;
 
       &,
-      .poster {
+      .ewin {
         width: 35vw;
         height: 20vw;
 
         @media (max-width: 767px) {
-          width: 45vw;
+          width: 44vw;
           height: 25vw;
         }
       }
+
+      .ewin {
+        background-image: url("/imgs/home/影片封面-11.png");
+      }
+    }
+
+    .player-item,
+    .ewin-player-item {
+      position: absolute;
+      opacity: 0;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+
+      .poster,
+      .ewin {
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        cursor: pointer;
+      }
     }
   }
 }