update video

src/fe/mrna/css/all.css

@@ -13471,12 +13471,18 @@ p {
 }
 .modal__video iframe {
   position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
+  width: 99%;
+  height: 99%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.modal .modal-body .video__icon {
+  width: 5em;
 }
 .modal .modal-body .video__icon p {
+  font-size: 1em;
+  font-weight: 500;
   color: #0699d2;
   margin-top: 0.5em;
 }

src/fe/mrna/css/component/_modal.scss

@@ -10,15 +10,19 @@
         margin-bottom: 2em;
         iframe {
             position: absolute;
-            width: 100%;
-            height: 100%;
-            left: 0;
-            top: 0;
+            width: 99%;
+            height: 99%;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
         }
     }
     .modal-body {
         .video__icon {
+            width: 5em;
             p {
+                font-size: 1em;
+                font-weight: 500;
                 color: #0699d2;
                 margin-top: 0.5em;
             }

src/fe/mrna/css/section/_research.scss

@@ -91,13 +91,6 @@
         .copywriting {
             padding: 3em 0 3em;
         }
-        &__body {
-            .video__icon p {
-                font-size: 1.2em;
-                color: #0699d2;
-                margin-top: 0.5em;
-            }
-        }
         &__list {
             width: 100%;
         }

src/fe/mrna/js/main.js

@@ -54,17 +54,17 @@ main = function () {
 		},
 		{
 			containerId: "player_proud",
-			videoId: "_m-bMZhZT04",
+			videoId: "5HYvR3I5vjw",
 			category: "research",
 		},
 		{
 			containerId: "player_feature",
-			videoId: "_m-bMZhZT04",
+			videoId: "1eS50Ng9x_M",
 			category: "research",
 		},
 		{
 			containerId: "player_show",
-			videoId: "_m-bMZhZT04",
+			videoId: "mA6C_-b2oE4",
 			category: "research",
 		},
 	];
@@ -107,13 +107,11 @@ main = function () {
 		// 點擊 專家影片 關閉此功能
 		$(".modal__video .video__overlay").on("click", function () {
 			let videoBox = $(this).parents(".video");
-			console.log(videoBox)
+			// console.log(videoBox)
 			if (!videoBox.hasClass("active")) {
 				videoBox.addClass("active");
-				videoBox.children("iframe").click();
-				console.log("videoBox click")
 			} else {
-				// videoBox.removeClass("active");
+				videoBox.removeClass("active");
 			}
 		});
 
@@ -137,6 +135,10 @@ main = function () {
 			$("#testModal .modal__game__ans").hide();
 		})
 
+		$(".modal-research .btn-close").on("click", function(){
+			modalVideoStop();
+		});
+		
 		// 測試用
 		// gsap.to(".game__item-start", { duration: 0.5, autoAlpha: 0 });
 		// gsap.to(".game__item-main", { duration: 0.5, autoAlpha: 0 });
@@ -420,10 +422,14 @@ main = function () {
 	}
 
 	function onPlayerStateChange(event) {
-		console.log(event.target.o.id)
+		// console.log(event.target.o.id)
 		if (event.data == YT.PlayerState.PLAYING) {
 			$(`#${event.target.o.id}`).parents(".video").find(".video__overlay").hide();
 		}
+		// console.log(event.data)
+		if (event.data == -1) {
+			$(`#${event.target.o.id}`).parents(".video").find(".video__overlay").show();
+		}
 	}
 
 	// 控制單個播放器播放
@@ -462,6 +468,13 @@ main = function () {
 		}
 	}
 
+	function modalVideoStop() {
+		for (var i = 6; i < players.length; i++) {
+			players[i].stopVideo();
+			// console.log(i)
+		}
+	}
+
 	// ====================  時間軸相關  ====================
 
 	// 踏上mRNA歷史軌跡 影片程序