유튜브 동영상 반응형으로 넣기

유튜브 동영상 소스 코드는 iframe을 이용하고, 가로 크기와 세로 크기가 정해져있습니다.

<iframe width="560" height="315" src="xxx" frameborder="0" allowfullscreen></iframe>

이 코드를 반응형 웹에 넣으면 모바일 기기로 보았을 때 레이아웃을 벗어나게 됩니다.

이를 해결하는 방법을 소개합니다.

CSS 추가

다음 코드를 CSS에 추가합니다.

.youtubeWrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.youtubeWrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

유튜브 소스 코드 변경

유튜브 소스 코드를 youtubeWrap을 클래스 값으로 가지는 요소로 감쌉니다.

<div class="youtubeWrap">
  <iframe width="560" height="315" src="xxx" frameborder="0" allowfullscreen></iframe> 

</div>