유튜브 영상을 모바일에서 볼 때 비율이 이상하다고 느낄때
유튜브 동영상 소스 코드는 iframe을 이용하고, 가로 크기와 세로 크기가 정해져있습니다
<div class="video-container"><iframe src="https://www.youtube.com/embed/N_NN4bh75Bk" frameborder="0" allowfullscreen></iframe></div>
이를 해결하는 방법을 소개합니다.
CSS 추가
다음 코드를 CSS에 추가합니다.
.video-container {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.video-container iframe,.video-container object,.video-container embed { position:absolute; top:0; left:0; width:100%; height:90%; }
유튜브 소스 코드 변경
유튜브 소스 코드를 video-container을 클래스 값으로 가지는 요소로 감쌉니다
