docs: update Dance/Blues/Instruction_Video/Bluesroom/new-page/0_abcd_esdf

Dance/Blues/Instruction_Video/Bluesroom/new-page/0_abcd_esdf.html

@@ -2,7 +2,7 @@
 title: abcd edsdf
 description: 
 published: true
-date: 2026-04-23T08:33:07.395Z
+date: 2026-04-23T08:33:57.024Z
 tags: 
 editor: code
 dateCreated: 2026-04-23T05:48:59.751Z
@@ -10,35 +10,47 @@ dateCreated: 2026-04-23T05:48:59.751Z
 
 <h1>1_Basic Turns Course</h1>
 <hr>
-<div class="video-wrapper">
+<div class="video-outer-container">
-<iframe src="https://video.terbits.xyz/player.html?src=videos/Bluesrooms/Begginer%20Survival%20Kit/Basic%20Turns/1_Basic%20Turns%20Course.mp4" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe>
+  <div class="video-inner-box">
+    <iframe 
+      src="https://video.terbits.xyz/player.html?src=videos/Bluesrooms/Begginer%20Survival%20Kit/Basic%20Turns/1_Basic%20Turns%20Course.mp4" 
+      frameborder="0" 
+      allowfullscreen 
+      allow="autoplay; fullscreen">
+    </iframe>
+  </div>
 </div>
+
 <style>
-.video-wrapper {
+/* 클래스 명 중복 방지를 위해 고유한 이름 사용 */
-  position: relative;
+.video-outer-container {
-  /* 모바일/데스크톱 너비 설정 */
+  width: 100% !important; /* 모바일 우선: 가로 꽉 채움 */
-  width: 200%; 
+  max-width: 100% !important;
-  /* 16:9 비율 유지 (9 / 16 * 100) */
+  margin: 20px auto !important;
-  padding-bottom: 106.25%; 
-  height: 0;
-  overflow: hidden;
 }
 
+/* 데스크톱 너비 조절 (768px 이상일 때) */
 @media (min-width: 768px) {
-  .video-wrapper {
+  .video-outer-container {
-    /* 데스크톱 너비 */
+    width: 60% !important; /* 데스크톱에서 60% 적용 */
-    width: 60%; 
-    margin: 0 auto;
   }
 }
 
-.video-wrapper iframe {
+.video-inner-box {
-  /* 부모(.video-wrapper)의 padding 영역을 꽉 채우도록 강제 설정 */
+  position: relative !important;
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100% !important;
-  height: 100% !important;
+  height: 0 !important;
+  padding-top: 56.25% !important; /* 16:9 비율 유지 핵심 */
+  overflow: hidden !important;
+}
+
+.video-inner-box iframe {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important; /* 부모의 padding 영역을 100% 채움 */
+  border: 0 !important;
 }
 </style>
 <hr>