練習室後台

sechskies-admin-hw/css/style.css

@@ -136,10 +136,10 @@ body::after {
   color: #fff;
 }
 
-/* ============ 主視覺 ============ */
+/* ============ 主視覺（嵌入影片背景，尺寸依影片比例） ============ */
 .sk-hero {
-  background: linear-gradient(180deg, rgba(180, 184, 191, 0.14) 0%, transparent 100%);
   border-bottom: 1px solid var(--sk-border);
+  overflow: hidden;
 }
 
 .sk-hero h1 {
@@ -155,6 +155,39 @@ body::after {
   border-radius: 2px;
 }
 
+.sk-hero-video-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #000;
+}
+
+.sk-hero-video-frame iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  pointer-events: none;
+}
+
+.sk-hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.8) 100%);
+}
+
+.sk-hero-content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
 /* ============ 區塊標題 ============ */
 .sk-section-title {
   color: var(--sk-text);

sechskies-admin-hw/index.html

@@ -32,13 +32,21 @@
     </div>
   </nav>
 
-  <!-- 主視覺 -->
-  <header class="sk-hero py-5">
-    <div class="container py-4 text-center">
+  <!-- 主視覺（嵌入影片背景） -->
+  <header class="sk-hero">
+    <div class="sk-hero-video-frame">
+      <iframe
+        src="https://www.youtube.com/embed/ARi0cfpv6mE?autoplay=1&mute=1&loop=1&playlist=ARi0cfpv6mE&controls=0&modestbranding=1&rel=0&showinfo=0"
+        title="水晶練習室主視覺影片"
+        allow="autoplay; encrypted-media"
+        loading="lazy"></iframe>
+      <div class="sk-hero-overlay"></div>
+      <div class="sk-hero-content container text-center">
         <h1 class="display-4 fw-bold mb-0">偶像練習生</h1>
         <div class="sk-title-bar"></div>
         <p class="lead mb-0 mt-4 text-body-secondary">全能Leader 殷志源打造全新綜藝</p>
       </div>
+    </div>
   </header>
 
   <main class="container py-5">