update carousel

layouts/partials/components/carousel.html

@@ -1,18 +1,38 @@
 <div class="my-4 carousel-wrapper">
   <div class="swiper carousel">
     <div class="swiper-wrapper">
+      <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>
+
+          <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">
         <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">
         </a>
-
         <div class="player-item">
           <div id="player"></div>
         </div>
-
       </div>
+
       <div class="swiper-slide">
         <a target="_blank" href="/main-news/警察廣播電台初次ai主播真人建模-與choozmo合作ai影片/">
           <div class="wrapper">
@@ -43,6 +63,7 @@
           </select>
         </div>
       </div>
+
       <div class="swiper-slide">
         <a href="/main-news/virtual-production-studio-turnkey-solution/">
           <img src="/imgs/home/banner-02.jpg"
@@ -130,4 +151,15 @@
       $('#yt_frame').attr('src', 'https://www.youtube.com/embed/ycUAa3iKjhA?autoplay=1&mute=1');
     }
   }
+
+  function setEwinFrame(select) {
+    let val = select.value;
+    console.log('select',select.value);
+
+    if (val === "0922") {
+      $('#yt_ewin_frame').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');
+    }
+  }
 </script>

static/css/style.css

@@ -4264,6 +4264,9 @@
   width: 100%;
   height: 100%;
 }
+.carousel-wrapper .carousel .wrapper .video-wrapper.e-win {
+  left: 33%;
+}
 .carousel-wrapper .carousel .lang {
   position: absolute;
 }
@@ -4288,6 +4291,22 @@
     padding: 2px 0px;
   }
 }
+.carousel-wrapper .carousel .toggle-video {
+  position: absolute;
+  top: 41%;
+  left: 3vw;
+  z-index: 100;
+}
+@media (max-width: 991px) {
+  .carousel-wrapper .carousel .toggle-video {
+    top: 33%;
+  }
+}
+@media (max-width: 575px) {
+  .carousel-wrapper .carousel .toggle-video {
+    top: 31%;
+  }
+}
 .carousel-wrapper .carousel .person-img {
   width: 25vw;
   position: absolute;

static/css/style.scss

@@ -4678,6 +4678,10 @@
           width: 100%;
           height: 100%;
         }
+
+        &.e-win {
+          left: 33%;
+        }
       }
     }
 
@@ -4706,6 +4710,21 @@
       }
     }
 
+    .toggle-video {
+      position: absolute;
+      top: 41%;
+      left: 3vw;
+      z-index: 100;
+
+      @media (max-width: 991px) {
+        top: 33%;
+      }
+
+      @media (max-width: 575px) {
+        top: 31%;
+      }
+    }
+
     .person-img {
       width: 25vw;
       position: absolute;