Sherry пре 1 година
родитељ
комит
6390ea3f58

+ 10
- 4
src/fe/mrna/css/all.css Прегледај датотеку

13471
 }
13471
 }
13472
 .modal__video iframe {
13472
 .modal__video iframe {
13473
   position: absolute;
13473
   position: absolute;
13474
-  width: 100%;
13475
-  height: 100%;
13476
-  left: 0;
13477
-  top: 0;
13474
+  width: 99%;
13475
+  height: 99%;
13476
+  left: 50%;
13477
+  top: 50%;
13478
+  transform: translate(-50%, -50%);
13479
+}
13480
+.modal .modal-body .video__icon {
13481
+  width: 5em;
13478
 }
13482
 }
13479
 .modal .modal-body .video__icon p {
13483
 .modal .modal-body .video__icon p {
13484
+  font-size: 1em;
13485
+  font-weight: 500;
13480
   color: #0699d2;
13486
   color: #0699d2;
13481
   margin-top: 0.5em;
13487
   margin-top: 0.5em;
13482
 }
13488
 }

+ 1
- 1
src/fe/mrna/css/all.css.map
Разлика између датотеке није приказан због своје велике величине
Прегледај датотеку


+ 8
- 4
src/fe/mrna/css/component/_modal.scss Прегледај датотеку

10
         margin-bottom: 2em;
10
         margin-bottom: 2em;
11
         iframe {
11
         iframe {
12
             position: absolute;
12
             position: absolute;
13
-            width: 100%;
14
-            height: 100%;
15
-            left: 0;
16
-            top: 0;
13
+            width: 99%;
14
+            height: 99%;
15
+            left: 50%;
16
+            top: 50%;
17
+            transform: translate(-50%, -50%);
17
         }
18
         }
18
     }
19
     }
19
     .modal-body {
20
     .modal-body {
20
         .video__icon {
21
         .video__icon {
22
+            width: 5em;
21
             p {
23
             p {
24
+                font-size: 1em;
25
+                font-weight: 500;
22
                 color: #0699d2;
26
                 color: #0699d2;
23
                 margin-top: 0.5em;
27
                 margin-top: 0.5em;
24
             }
28
             }

+ 0
- 7
src/fe/mrna/css/section/_research.scss Прегледај датотеку

91
         .copywriting {
91
         .copywriting {
92
             padding: 3em 0 3em;
92
             padding: 3em 0 3em;
93
         }
93
         }
94
-        &__body {
95
-            .video__icon p {
96
-                font-size: 1.2em;
97
-                color: #0699d2;
98
-                margin-top: 0.5em;
99
-            }
100
-        }
101
         &__list {
94
         &__list {
102
             width: 100%;
95
             width: 100%;
103
         }
96
         }

+ 21
- 8
src/fe/mrna/js/main.js Прегледај датотеку

54
 		},
54
 		},
55
 		{
55
 		{
56
 			containerId: "player_proud",
56
 			containerId: "player_proud",
57
-			videoId: "_m-bMZhZT04",
57
+			videoId: "5HYvR3I5vjw",
58
 			category: "research",
58
 			category: "research",
59
 		},
59
 		},
60
 		{
60
 		{
61
 			containerId: "player_feature",
61
 			containerId: "player_feature",
62
-			videoId: "_m-bMZhZT04",
62
+			videoId: "1eS50Ng9x_M",
63
 			category: "research",
63
 			category: "research",
64
 		},
64
 		},
65
 		{
65
 		{
66
 			containerId: "player_show",
66
 			containerId: "player_show",
67
-			videoId: "_m-bMZhZT04",
67
+			videoId: "mA6C_-b2oE4",
68
 			category: "research",
68
 			category: "research",
69
 		},
69
 		},
70
 	];
70
 	];
107
 		// 點擊 專家影片 關閉此功能
107
 		// 點擊 專家影片 關閉此功能
108
 		$(".modal__video .video__overlay").on("click", function () {
108
 		$(".modal__video .video__overlay").on("click", function () {
109
 			let videoBox = $(this).parents(".video");
109
 			let videoBox = $(this).parents(".video");
110
-			console.log(videoBox)
110
+			// console.log(videoBox)
111
 			if (!videoBox.hasClass("active")) {
111
 			if (!videoBox.hasClass("active")) {
112
 				videoBox.addClass("active");
112
 				videoBox.addClass("active");
113
-				videoBox.children("iframe").click();
114
-				console.log("videoBox click")
115
 			} else {
113
 			} else {
116
-				// videoBox.removeClass("active");
114
+				videoBox.removeClass("active");
117
 			}
115
 			}
118
 		});
116
 		});
119
 
117
 
137
 			$("#testModal .modal__game__ans").hide();
135
 			$("#testModal .modal__game__ans").hide();
138
 		})
136
 		})
139
 
137
 
138
+		$(".modal-research .btn-close").on("click", function(){
139
+			modalVideoStop();
140
+		});
141
+		
140
 		// 測試用
142
 		// 測試用
141
 		// gsap.to(".game__item-start", { duration: 0.5, autoAlpha: 0 });
143
 		// gsap.to(".game__item-start", { duration: 0.5, autoAlpha: 0 });
142
 		// gsap.to(".game__item-main", { duration: 0.5, autoAlpha: 0 });
144
 		// gsap.to(".game__item-main", { duration: 0.5, autoAlpha: 0 });
420
 	}
422
 	}
421
 
423
 
422
 	function onPlayerStateChange(event) {
424
 	function onPlayerStateChange(event) {
423
-		console.log(event.target.o.id)
425
+		// console.log(event.target.o.id)
424
 		if (event.data == YT.PlayerState.PLAYING) {
426
 		if (event.data == YT.PlayerState.PLAYING) {
425
 			$(`#${event.target.o.id}`).parents(".video").find(".video__overlay").hide();
427
 			$(`#${event.target.o.id}`).parents(".video").find(".video__overlay").hide();
426
 		}
428
 		}
429
+		// console.log(event.data)
430
+		if (event.data == -1) {
431
+			$(`#${event.target.o.id}`).parents(".video").find(".video__overlay").show();
432
+		}
427
 	}
433
 	}
428
 
434
 
429
 	// 控制單個播放器播放
435
 	// 控制單個播放器播放
462
 		}
468
 		}
463
 	}
469
 	}
464
 
470
 
471
+	function modalVideoStop() {
472
+		for (var i = 6; i < players.length; i++) {
473
+			players[i].stopVideo();
474
+			// console.log(i)
475
+		}
476
+	}
477
+
465
 	// ====================  時間軸相關  ====================
478
 	// ====================  時間軸相關  ====================
466
 
479
 
467
 	// 踏上mRNA歷史軌跡 影片程序
480
 	// 踏上mRNA歷史軌跡 影片程序