[반응형] 유투브 반응형으로 넣는방법

유투브 영상을 반응형 코드에 맞게 화면을 줄였을때

비율에 맞게 줄어들게 하려면 아래와 같이 코드를 작성하면 된다.

HTML 코드 부분

CSS 코드 부분

    .video-container { position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0; }
    .video-container > iframe { position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

여기서 CSS 비율 퍼센트가 중요한데 비율은 아래와 같다

16:9 = 56.25%

4:3 = 75%

이부분만 잘 이용하면 유투브 영상도 반응형으로 넣을수 있다