유튜브 영상 너비(width)값에 맞추어 높이(height)값 비율 맞추기

 

유튜브 영상 너비(width)값에 맞추어 높이(height)값 비율 맞추기

가로 세로 비율을 이용하여 스타일을 적용하는 방법입니다.

 

html

<div class="wrap">
  <div class="content">
    <iframe src="https://www.youtube.com/embed/wwWcusQMBPI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

 

 

css

.wrap{
  width:500px;
}

.content{
  position:relative;
  padding-top:56%;
  width:100%;  
}

iframe{
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%;
}

 

적용 사항은 아래와 같습니다.