Skill/How To
반응형 유튜브 플레이어 (responsive youtube player)
oodada
2020. 11. 26. 09:06
기본 개념
기본 개념은 width 비율 만큼 padding-bottom 값을 동일하게 주면 된다.
100%를 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다.
See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen.
응용 사례
See the Pen responsive youtube player by zinee (@zineeworld) on CodePen.
응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다.
유튜브 플레이어 비율은 16:9 이기 때문에 padding-bottom: 56.25% 을 주면 된다.
비율을 빠르게 계산하기 위해서는 아래 웹 계산기를 사용하면 편리하다.
