iframe change lang

layouts/partials/components/carousel.html

@@ -3,32 +3,33 @@
     <div class="swiper-wrapper">
       <div class="swiper-slide">
         <a target="_blank"
-          href="https://www.youtube.com/watch?v=iub7XwIIKsU&list=PLjrAuyEb2pOxbUSBPLDxjh71RmjEtir_6&index=43">
+          href="/main-news/警察廣播電台初次ai主播真人建模-與choozmo合作ai影片/">
           <div class="wrapper">
             <img src="/imgs/home/banner-01.jpg"
               alt="choozmo｜AI主播｜AI｜警察廣播電臺｜警廣｜警廣路況｜警廣線上收聽｜人工智慧｜AI人工智慧｜人工智能｜AI雙主播｜雙主播｜虛擬主播｜虛擬人｜新聞播報">
             <div class="video-wrapper">
-              <iframe src="https://www.youtube.com/embed/iub7XwIIKsU?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>
-        </a>
-      </div>
-      <div class="swiper-slide">
-        <a target="_blank" href="https://www.youtube.com/playlist?list=PLjrAuyEb2pOxbUSBPLDxjh71RmjEtir_6">
-          <div class="wrapper">
-            <img src="/imgs/home/banner-01.jpg"
-              alt="choozmo｜AI主播｜AI｜警察廣播電臺｜警廣｜警廣路況｜警廣線上收聽｜人工智慧｜AI人工智慧｜人工智能｜AI雙主播｜雙主播｜虛擬主播｜虛擬人｜新聞播報">
-            <div class="video-wrapper">
-              <iframe src="https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1" title="choozmo｜警察廣播電臺"
+              <iframe id="yt_frame" src="https://www.youtube.com/embed/HgrjL8pTpUY?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>
         </a>
+        <div class="frame-item">
+          <select onchange="setFrame(this)">
+            <option value="">切換語言</option>
+            <option value="國語">國語</option>
+            <option value="臺語">臺語</option>
+            <option value="英文">英文</option>
+            <option value="日文">日文</option>
+            <option value="泰文">泰文</option>
+            <option value="印尼文">印尼文</option>
+            <option value="越南文">越南文</option>
+            <option value="馬來文">馬來文</option>
+            <option value="原住民語">原住民語(阿美族)</option>
+            <option value="手語">手語</option>
+          </select>
+        </div>
       </div>
       <div class="swiper-slide">
         <a href="/main-news/virtual-production-studio-turnkey-solution/">
@@ -42,4 +43,31 @@
   <div class="swiper-button-next d-none d-md-block"></div>
   <div class="swiper-button-prev d-none d-md-block"></div>
   <div class="swiper-pagination"></div>
-</div>
+</div>
+
+<script>
+  function setFrame(select) {
+    let val = select.value;
+    if (val==="國語"){
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1');
+    } else if (val==="臺語") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/iub7XwIIKsU?autoplay=1&mute=1');
+    }else if (val==="英文") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/J0rMl5Aje8E?autoplay=1&mute=1');
+    }else if (val==="日文") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/STBlnumMtJI?autoplay=1&mute=1');
+    }else if (val==="泰文") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/IQSNsUpzH4M?autoplay=1&mute=1');
+    }else if (val==="印尼文") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/moxFwtySJM8?autoplay=1&mute=1');
+    }else if (val==="越南文") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/QfmlSYbvNsg?autoplay=1&mute=1');
+    }else if (val==="馬來文") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/7jTyzenud8o?autoplay=1&mute=1');
+    }else if (val==="原住民語") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/oGEX1P9AF9Y?autoplay=1&mute=1');
+    }else if (val==="手語") {
+      $('#yt_frame').attr('src','https://www.youtube.com/embed/ycUAa3iKjhA?autoplay=1&mute=1');
+    }
+  }
+</script>

static/css/style.css

@@ -4058,6 +4058,27 @@
 .carousel-wrapper .carousel .lang {
   position: absolute;
 }
+.carousel-wrapper .carousel .frame-item {
+  position: absolute;
+  top: 42%;
+  left: 38vw;
+}
+@media (max-width: 767px) {
+  .carousel-wrapper .carousel .frame-item {
+    top: 5%;
+    left: unset;
+    right: 3vw;
+  }
+}
+.carousel-wrapper .carousel .frame-item select {
+  padding: 8px 20px;
+  border-radius: 8px;
+}
+@media (max-width: 1200px) {
+  .carousel-wrapper .carousel .frame-item select {
+    padding: 2px 0px;
+  }
+}
 
 /* carousel End */
 /* news-content Start */

static/css/style.scss

@@ -4375,6 +4375,27 @@
     .lang {
       position: absolute;
     }
+
+    .frame-item {
+      position: absolute;
+      top: 42%;
+      left: 38vw;
+
+      @media (max-width: 767px) {
+        top: 5%;
+        left: unset;
+        right: 3vw;
+      }
+
+      select {
+        padding: 8px 20px;
+        border-radius: 8px;
+
+        @media (max-width: 1200px) {
+          padding: 2px 0px;
+        }
+      }
+    }
   }
 }