[HTML/CSS] 9:16 비율의 동영상 iframe 삽입하기

Feature 영역의 독립적인 중앙정렬

Feature 영역이 .inner 클래스를 지정하지 않은 이유

 

Problem⭐❔
- FEATURE 영역은 .inner 클래스를 지정하지 않았다.
다른 section 요소들과 같은 라인으로 화면 중간 가운데 정렬이 아닌
독립적으로 중앙정렬을 해야하기에 따로 직접적으로 css를 지정해줬다.

Solution ✅❕
inner 클래스를 적용하지 않았기에 padding-top: 66px; 여백을 부여했다.

 

/* FEATURE */
.section--feature{
  background: #f5f5f5;
   padding-top: 66px;
  }
  .section--feature .summary{
  /*1) 중앙정렬을 위해 가로 너비가 정의 되어있어야한다.
    2) 최대 너비 내에서 가변하게 가운데 정렬 */
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

 

 

---

16 : 9 비율의 비디오, iframe 

 

<div class="video">
  <div class="video-ratio">
    <iframe src="" frameborder="0"></iframe>
  </div>
</div>

 

 

 

.video{
/* (7) max-width로 지정한 값이 아래에서 자유롭게 가변되게끔  */
  max-width : 650px;
  border : 4px solid red;
}
.video-ratio{
/* (1) 높이값을 사용하지 않는다.  */
  height : 0;
  
/* (2) padding-top '%'단위는 부모요소의 가로너비에 영향을 받는다*/
  padding-top:56.25%;
  
/* (4) iframe의 부모 요소 */ 
  position : relative;
}
iframe{
  background-color : black;
/* (3) 부모 요소를 기준으로 배치하기 위해 position 부여 */ 
  position : absolute;
  
/* (5) 부모 요소를 기준으로 배치 */
  top : 0 ;
  left : 0 ;
  
/* (6) 16:9 비율의 부모 너비와 높이 맞춰서 지정 */
  width : 100%;
  height: 100%;
}

높이가 존재하지 않음

1️⃣ height값은 세로 높이를 고정(fix)해버린다.

그래서 height값은 없애고 padding-top으로 높이를 조절할 것이다.

 

2️⃣ padding에 % 단위를 사용한다면 ?

✅ 부모 요소의 가로너비의 영향을 받는다.
  부모 요소 가로 사이즈의 영향을 받는 %로 
  가로너비 500px의 16:9 비율로 세로값을 만들어야한다.

 

500 : X = 16 : 9, X = 56.25

padding-top으로 높이 지정

.video의 width값이 300px/600px으로 가변해도 부모 요소인 .video의 너비가 100%인 셈이기에
padding-top을 부모기준으로 %로 작성해두면
.video의 width값이 변하더라도 항상 16:9 비율로 높이값이 정해지게 된다.
300px를 기준으로 16:9 비율로 box가 만들어진다.

📌2번까지의 과정으로 높이를 얻을 수 있다.

 

 

3️⃣ 부모 요소를 기준으로 배치하기 위해 position 값 지정

4️⃣ 부모 요소 position 값 지정

 

부모요소 끝나는 부분에 붙은 자식요소

 

5️⃣ 부모 요소(video-ratio)를 기준으로 배치 

iframe 요소가 부모 사이즈에 맞게 나오지 않는다.  6️⃣번 진행해야한다.

 

부모요소에 꽉차게 배치되지 않았다.

 

6️⃣ 부모 요소에 꽉 맞춰서 들어가도록 너비 높이 지정

 

iframe 요소가 꽉 찼다.

 

* iframe에 비디오 정보를 삽입해주면 부모 요소에 딱 맞춰서 나온다.

- 반응형으로 비율에 맞게 나오게끔 매개체로 video-ratio 클래스 작성

 

<div class="video">
  <div class="video-ratio">
    <!-- iframe 비디오 속성 작성-->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/afvT1c1ii0c"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen>
    </iframe>
  </div>
</div>

완성

 

 

7️⃣  최대 사이즈 지정으로 fix하지 않고

해당 사이즈 아래에서는 자동으로 사이즈 조절되게 만들어준다.

 

 

/* 16:9 video*/
.section--feature .video{
  max-width: 650px;

  /* .section--feature .summary 영역과의 여백과 가운데 정렬
  위아래 50px /좌우 auto >> 가운데 정렬  */
  margin: 50px auto;
}
.section--feature .video .video-ratio {
  height: 0;
  padding-top: 56.25%;
  position: relative;
}
.section--feature .video .video-ratio iframe {
  position: absolute;
  top: 0 ;
  left: 0 ;
  width : 100%;
  height: 100%;
}