유튜브 동영상 소스 코드는 iframe을 이용하고, 가로 크기와 세로 크기가 정해져있습니다.
이 코드를 반응형 웹에 넣으면 모바일 기기로 보았을 때 레이아웃을 벗어나게 됩니다.
이를 해결하는 방법을 소개합니다.
CSS 추가
다음 코드를 CSS에 추가합니다.
.youtubeWrap { position: relative; width: 100%; padding-bottom: 56.25%;}.youtubeWrap iframe { position: absolute; width: 100%; height: 100%;}
유튜브 소스 코드 변경
유튜브 소스 코드를 youtubeWrap을 클래스 값으로 가지는 요소로 감쌉니다.
예제
YouTube
jQuery를 이용하여 자동으로 적용시키기
유튜브 동영상을 넣을 때마다 코드를 수정하는 것이 번거롭다면 스크립트를 이용하여 자동으로 적용되도록 할 수 있습니다.
jQuery를 이용한다면 다음의 코드를 추가하면 됩니다.
$( 'iframe[src^="https://www.youtube.com/"]' ).wrap( '' );
유튜브를 소스로 하는 iframe이 있다면 youtubeWrap을 클래스 값을 가지는 div로 감싸라는 뜻입니다.
예제
YouTube