[#CSS] iframe 유튜브 영상 첨부 시 비율에 따라 크기 조절하기

 

 

 

 

 

유튜브 영상을 첨부하려고 하는데 반응형으로 영상 프레임 크기가 늘어났다, 줄어들었다 했으면 좋겠다

js를 쓰지 않고 css만 이용해서 설정해보자

 

 

 

 

 

html

<div class="video-list">
   <ul>
      <li>
         <iframe src="https://www.youtube.com/embed/" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         <span class="tit">iframe width, height 비율 설정하기(with shab)</span> 
      </li>
   </ul>
</div>

 

 

 

 

 

css

.video-list ul li {
  position: relative;
  padding-bottom: 55%;
  overflow: hidden;
}

.video-list ul li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

 

 

 

 

기기 혹은 웹에 따라 자동으로 크기가 비율로 조절된다