유튜브 동영상 반응형으로 삽입하기 (가로세로 비율 일정)

반응형 페이지에서 가로폭이 달라져도 유튜브 영상의 가로 세로폭을 일정한 비율로 유지할 수 있도록 하는 방법입니다. 

 

 

먼저 html에서 유튜브 공유 태그 <iframe> 을 <div>로 한번 감싸줍니다.

 

HTML

 

<div class="youtube-wrap">
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/유튜브아이디" 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
picture-in-picture" allowfullscreen>
</iframe>
</div>

css 에서는 이렇게 추가해줍니다.

 

 

 

CSS

.youtube-wrap{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 5px;
}
.youtube-wrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

 

만약 유튜브 양쪽에 간격을 주고 싶은 경우, .youtube-wrap 클래스 바깥쪽에서 padding을 추가해주면 됩니다.