모바일 유튜브 비율조절

 

모바일에서 유튜브 삽입시 데탑과 동일하게 넣었을때 깨짐

css 처리를 해줘야한다. 

 

---

 

 

          <div class="youtube">
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ONpDtp-mPvY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
          </div>

div 로 한번 감아주고 width / height 을 100% 로 맞춘다. 

 

 

---

.main_best .youtube {
  margin-top: 60px;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.main_best .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

영상 비율은 16:9 이기때문에 

옾이를 꽉 차게 100% 로 준다면

 

16 : 9 X100

16 : 900 

900 / 6 = 56.25%

 

 

 

즉 56.25% 비율로 아래를 늘려주라는 뜻