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:32:03.458Z
+date: 2026-04-23T08:32:55.543Z
 tags: 
 editor: code
 dateCreated: 2026-04-23T05:48:59.751Z
@@ -10,22 +10,36 @@ dateCreated: 2026-04-23T05:48:59.751Z
 
 <h1>1_Basic Turns Course</h1>
 <hr>
-<iframe src="https://video.terbits.xyz/player.html?src=videos/Bluesrooms/Begginer%20Survival%20Kit/Basic%20Turns/1_Basic%20Turns%20Course.mp4" class="modern-video" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe>
+<div class="video-wrapper">
+<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>
 <style>
-.modern-video {
-  width: 200%; /* 모바일 기준 */
-  /* iframe은 height: auto가 아니라 특정 값을 주거나 비율을 강제해야 함 */
-  aspect-ratio: 16 / 9;
-  height: auto !important; 
-  display: block;
+.video-wrapper {
+  position: relative;
+  /* 모바일/데스크톱 너비 설정 */
+  width: 100%; 
+  /* 16:9 비율 유지 (9 / 16 * 100) */
+  padding-bottom: 56.25%; 
+  height: 0;
+  overflow: hidden;
 }
 
 @media (min-width: 768px) {
-  .modern-video {
-    width: 60%; /* 데스크톱 기준 */
+  .video-wrapper {
+    /* 데스크톱 너비 */
+    width: 60%; 
     margin: 0 auto;
   }
 }
+
+.video-wrapper iframe {
+  /* 부모(.video-wrapper)의 padding 영역을 꽉 채우도록 강제 설정 */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
 </style>
 <hr>
 <p>COURSE: Basic Turns</p>