iframe Youtube 반응형 만들기

for_pavane 2020. 3. 27. 19:07

[CSS] 삽입된 유튜브 동영상을 반응형(Responsive)으로 만들기 – 모두의매뉴얼

워드프레스 블로그를 사용하면서 유튜브 동영상을 주소만 넣으면 아주 간단하게 삽입할 수 있습니다. 하지만 이 유튜브 동영상을 사용자에게 보여주는 과정에서 문제가 발생하는데 크기가 자동으로 조절 되지 않고 굉장히 크거나 작게 표현되는 것입니다. 구글링 해보니 그 문제점을 CSS 로 해결 할 수 있는 방법이 있어 기록으로 남겨 봅니다. (워드프레스의 경우를 예로 하고 있지만 유튜브 동영상이 임베드 된 경우면 거의 비슷할테니 같은 방식을 적용하면 워드프레스가 아

triki.net

■ 중요한 부분은 16:9 비율을 맞추기 위하여 iframe(position:absolute)을 감싼 div(position:relative)에 padding-bottom:56.25%를 주는 것.