유튜브에 모니터의 사이즈가 아닌 휴대폰의 사이즈에 최적화되어 올라오는 영상의 수는 날이 갈수록 늘고 있습니다. 그런데 아직도 유튜브의 '퍼가기(embed)' 기능은 거의 모든 비디오를 가로 560, 세로 315에 맞춰서 퍼오도록 자동으로 설정합니다.
iframe을 조금만 수정하면 세로 비디오로 변경할 수 있습니다.
예시
HTML
1 | <iframe width="360" height="640" src="https://www.youtube.com/embed/R3Mrl-rthso?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe> | cs |
간단하게 width와 height만 변경하면 됩니다.
원본에서 쓰는 560 * 315 를 뒤집어서 315 * 560으로 바꿔도 당연히 됩니다.
너비 / 높이 = 0.5625만 되게 해주세요.
당연하지만, 예전에 소개해 드렸던 반응형으로 iframe 감싸는 방법을 미디어 쿼리와 함께 이용하시면 적절하게 반응형으로 표시하실 수 있습니다.
