update

src/fe/mrna/css/all.css

@@ -13130,11 +13130,15 @@ p {
   width: 4.5em;
   z-index: 2;
   cursor: pointer;
+  transition: 0.3s;
 }
 .goToLine img {
   width: 100%;
   height: auto;
 }
+.goToLine:hover {
+  transform: translateY(-50%) scale(1.1);
+}
 
 @media screen and (max-width: 992px) {
   .wrapper {
@@ -13462,6 +13466,8 @@ p {
   height: 0;
   padding-bottom: 52.5%;
   margin-bottom: 1em;
+  box-shadow: none;
+  margin-bottom: 2em;
 }
 .modal__video iframe {
   position: absolute;
@@ -13470,6 +13476,10 @@ p {
   left: 0;
   top: 0;
 }
+.modal .modal-body .video__icon p {
+  color: #0699d2;
+  margin-top: 0.5em;
+}
 
 .modal-research::before {
   content: "";
@@ -13685,7 +13695,7 @@ p {
 }
 .modal-unlimit .modal__intro p {
   font-size: 0.8em;
-  line-height: 1.4;
+  line-height: 1.7;
 }
 .modal-unlimit .modal__intro ul {
   width: 54%;
@@ -13714,7 +13724,7 @@ p {
   padding: 2.5em 2.3em 2.3em;
 }
 .modal-show .modal__title {
-  margin-bottom: 0.5em;
+  margin-bottom: 1em;
 }
 .modal-show .modal__preface {
   margin-bottom: 1.5em;
@@ -13771,6 +13781,10 @@ p {
   font-size: 1.3em;
   color: #db1837;
 }
+.modal-show .modal__video {
+  width: 33.875em;
+  margin: 0 auto 2em;
+}
 
 .modal-test .modal-body {
   padding: 2.5em 2.6em 2.3em;
@@ -13857,6 +13871,14 @@ p {
 }
 
 @media screen and (max-width: 992px) {
+  .modal .modal-body .video__icon {
+    width: 4em;
+  }
+  .modal .modal-body .video__icon p {
+    font-size: 0.8em;
+    color: #0699d2;
+    margin-top: 0.5em;
+  }
   .modal-research .modal-dialog {
     margin: 1.5em 0.7em;
   }
@@ -13991,6 +14013,9 @@ p {
     font-size: 1.1em;
     font-weight: 400;
   }
+  .modal-show .modal__video {
+    width: 100%;
+  }
   .modal-test .modal-body {
     padding: 2.5em 1em 0.7em;
   }
@@ -14900,10 +14925,11 @@ p {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  width: 60em;
+  width: 70em;
   margin: 0 auto;
 }
 .research__item {
+  width: 21.25em;
   margin: 0 1em 3em;
   display: flex;
   flex-direction: column;
@@ -14916,6 +14942,9 @@ p {
   border: 0.2em solid #0699d2;
   transition: box-shadow 0.3s;
 }
+.research__item:hover .research__name {
+  animation: pulse 1.5s infinite;
+}
 .research__pic {
   border: 0.1em solid rgba(6, 153, 210, 0.3);
   box-shadow: 0.4em 0.4em 0.6em rgba(0, 0, 0, 0.1);
@@ -14931,9 +14960,8 @@ p {
 .research__name {
   display: inline-block;
   border-radius: 1.5em;
-  padding: 0.6em 1.5em;
+  padding: 0.6em 1em;
   box-shadow: 0 0 0 1em transparent;
-  animation: pulse 2s infinite;
   background-color: #0699d2;
   cursor: pointer;
 }
@@ -14942,11 +14970,17 @@ p {
   color: #0070a0;
   font-size: 1.2em;
   color: #ffffff;
+  line-height: 1;
   cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .research__name p span {
   display: inline-block;
-  font-size: 0.9em;
+  font-size: 0.6em;
+  margin: 0.2em 0.2em 0;
+  line-height: 1;
 }
 @keyframes pulse {
   0% {
@@ -14956,14 +14990,23 @@ p {
 
 @media screen and (max-width: 992px) {
   .research .container {
+    padding: 0;
     padding-bottom: 10em;
   }
   .research .copywriting {
     padding: 3em 0 3em;
   }
+  .research__body .video__icon p {
+    font-size: 1.2em;
+    color: #0699d2;
+    margin-top: 0.5em;
+  }
+  .research__list {
+    width: 100%;
+  }
   .research__item {
     margin: 0 0 3em;
-    width: 48%;
+    width: 30em;
   }
   .research__item:hover .research__pic {
     border: 0.4em solid #0699d2;
@@ -14972,14 +15015,14 @@ p {
     width: 25em;
     border-radius: 1.5em;
     box-shadow: 1em 1em 2em rgba(0, 0, 0, 0.1);
-    margin-bottom: 1em;
+    margin-bottom: 2em;
   }
   .research__name {
     border-radius: 2.5em;
     padding: 0.8em 2.5em;
   }
   .research__name p {
-    font-size: 1.6em;
+    font-size: 1.75em;
     white-space: nowrap;
   }
 }

src/fe/mrna/css/base/_base.scss

@@ -138,10 +138,14 @@ p {
   width: 4.5em;
   z-index: 2;
   cursor: pointer;
+  transition: 0.3s;;
   img {
     width: 100%;
     height: auto;
   }
+  &:hover {
+    transform: translateY(-50%) scale(1.1);
+  }
 }
 
 @media screen and (max-width: 992px) {

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

@@ -6,6 +6,8 @@
         height: 0;
         padding-bottom: 52.5%;
         margin-bottom: 1em;
+        box-shadow: none;
+        margin-bottom: 2em;
         iframe {
             position: absolute;
             width: 100%;
@@ -14,6 +16,14 @@
             top: 0;
         }
     }
+    .modal-body {
+        .video__icon {
+            p {
+                color: #0699d2;
+                margin-top: 0.5em;
+            }
+        }
+    }
 }
 .modal-research {
     &::before {
@@ -248,7 +258,7 @@
             }
             p {
                 font-size: 0.8em;
-                line-height: 1.4;
+                line-height: 1.7;
             }
             ul {
                 width: 54%;
@@ -282,7 +292,7 @@
             padding: 2.5em 2.3em 2.3em;
         }
         &__title {
-            margin-bottom: 0.5em;
+            margin-bottom: 1em;
         }
         &__preface {
             margin-bottom: 1.5em;
@@ -339,6 +349,10 @@
                 }
             }
         }
+        &__video {
+            width: 33.875em;
+            margin: 0 auto 2em
+        }
     }
 }
 
@@ -435,6 +449,18 @@
 }
 
 @media screen and (max-width: 992px) {
+    .modal {
+        .modal-body {
+            .video__icon {
+                width: 4em;
+                p {
+                    font-size: 0.8em;
+                    color: #0699d2;
+                    margin-top: 0.5em;
+                }
+            }
+        }
+    }
     .modal-research {
         .modal {
             &-dialog {
@@ -592,6 +618,9 @@
                     }
                 }
             }
+            &__video {
+                width: 100%;
+            }
         }
     }
     .modal-test {

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

@@ -16,10 +16,11 @@
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
-        width: 60em;
+        width: 70em;
         margin: 0 auto;
     }
     &__item {
+    width: em(340);
         margin: 0 1em 3em;
         display: flex;
         flex-direction: column;
@@ -32,14 +33,9 @@
                 border: 0.2em solid $blue;
                 transition: box-shadow 0.3s;
             }
-            // .research__name {
-            //     transition: 0.3s;
-            //     animation: none;
-            //     transform: scale(1.1);
-            //     p {
-            //         transition: 0.3s;
-            //     }
-            // }
+            .research__name {
+                animation: pulse 1.5s infinite;
+            }
         }
     }
     &__pic {
@@ -57,9 +53,8 @@
     &__name {
         display: inline-block;
         border-radius: 1.5em;
-        padding: 0.6em 1.5em;
+        padding: 0.6em 1em;
         box-shadow: 0 0 0 1em transparent;
-        animation: pulse 2s infinite;
         background-color: $blue;
         cursor: pointer;
         p {
@@ -67,10 +62,16 @@
             color: $blue-d;
             font-size: 1.2em;
             color: $white;
+            line-height: 1;
             cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             span {
                 display: inline-block;
-                font-size: 0.9em;
+                font-size: 0.6em;
+                margin: 0.2em 0.2em 0;
+                line-height: 1;
             }
         }
     }
@@ -84,14 +85,25 @@
 @media screen and (max-width: 992px) {
     .research {
         .container {
+            padding: 0;
             padding-bottom: 10em;
         }
         .copywriting {
             padding: 3em 0 3em;
         }
+        &__body {
+            .video__icon p {
+                font-size: 1.2em;
+                color: #0699d2;
+                margin-top: 0.5em;
+            }
+        }
+        &__list {
+            width: 100%;
+        }
         &__item {
             margin: 0 0 3em;
-            width: 48%;
+            width: 30em;
             &:hover {
                 .research__pic {
                     border: 0.4em solid $blue;
@@ -102,13 +114,13 @@
             width: 25em;
             border-radius: 1.5em;
             box-shadow: 1em 1em 2em rgba(#000, 0.1);
-            margin-bottom: 1em;
+            margin-bottom: 2em;
         }
         &__name {
             border-radius: 2.5em;
             padding: 0.8em 2.5em;
             p {
-                font-size: 1.6em;
+                font-size: 1.75em;
                 white-space: nowrap;
             }
         }

src/fe/mrna/index.html

@@ -610,8 +610,18 @@
           <div class="modal__title">
             <h2>mRNA疫苗</h4>
           </div>
-          <div class="modal__video">
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ipg40ew_xcU?si=bEl_bqUTGc0-Y4fT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+          <div class="video modal__video">
+            <div class="video__overlay">
+              <div class="video__frame"></div>
+              <div class="video__icon">
+                <img src="./images/video-icon.png" alt="">
+                <p>影片播放</p>
+              </div>
+            </div>
+            <div class="video__player">
+              <div class="video__yt" id="player_proud">
+              </div>
+            </div>
           </div>
           <div class="modal__preface">
             <h3>mRNA疫苗是如何運作的?</h3>
@@ -682,8 +692,18 @@
           <div class="modal__title">
             <h2>mRNA疫苗特色</h4>
           </div>
-          <div class="modal__video">
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ipg40ew_xcU?si=bEl_bqUTGc0-Y4fT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+          <div class="video modal__video">
+            <div class="video__overlay">
+              <div class="video__frame"></div>
+              <div class="video__icon">
+                <img src="./images/video-icon.png" alt="">
+                <p>影片播放</p>
+              </div>
+            </div>
+            <div class="video__player">
+              <div class="video__yt" id="player_feature">
+              </div>
+            </div>
           </div>
           <div class="modal__principle">
             <div class="modal__principle__item modal__principle__item-blue">
@@ -833,8 +853,18 @@
           <div class="modal__title">
             <h2>疫情下的mRNA疫苗</h4>
           </div>
-          <div class="modal__video">
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ipg40ew_xcU?si=bEl_bqUTGc0-Y4fT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+          <div class="video modal__video">
+            <div class="video__overlay">
+              <div class="video__frame"></div>
+              <div class="video__icon">
+                <img src="./images/video-icon.png" alt="">
+                <p>影片播放</p>
+              </div>
+            </div>
+            <div class="video__player">
+              <div class="video__yt" id="player_show">
+              </div>
+            </div>
           </div>
           <div class="modal__preface">
             <p>

src/fe/mrna/js/main.js

@@ -52,6 +52,21 @@ main = function () {
 			category: "understand",
 			
 		},
+		{
+			containerId: "player_proud",
+			videoId: "_m-bMZhZT04",
+			category: "research",
+		},
+		{
+			containerId: "player_feature",
+			videoId: "_m-bMZhZT04",
+			category: "research",
+		},
+		{
+			containerId: "player_show",
+			videoId: "_m-bMZhZT04",
+			category: "research",
+		},
 	];
 
 	// 創建播放器對象數組
@@ -90,17 +105,17 @@ main = function () {
 		});
 
 		// 點擊 專家影片 關閉此功能
-		// $(".expert__video .video__overlay").on("click", function () {
-		// 	let targetIdx = $(this).data("videoIdx");
-		// 	let videoBox = $(this).parents(".video");
-		// 	if (!videoBox.hasClass("active")) {
-		// 		videoBox.addClass("active");
-		// 		playVideo(targetIdx);
-		// 	} else {
-		// 		videoBox.removeClass("active");
-		// 		pauseVideo(targetIdx);
-		// 	}
-		// });
+		$(".modal__video .video__overlay").on("click", function () {
+			let videoBox = $(this).parents(".video");
+			console.log(videoBox)
+			if (!videoBox.hasClass("active")) {
+				videoBox.addClass("active");
+				videoBox.children("iframe").click();
+				console.log("videoBox click")
+			} else {
+				// videoBox.removeClass("active");
+			}
+		});
 
 		// 點擊 歷史軌跡 年份
 		$(".history .history__timeline__year").on("click", function () {