유튜브 높이값 자동조절하기 > 코딩소스

• 목록

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;max-width: 100%; height: auto; }
.embed-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


<div class="embed-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/TuKdf_xvg2E?si=i2MWyeqFTzZQ0-Yy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
</div>




padding-bottom: 56.25% 는 padding값을 주어 16:9 비율로 공간을 만드는것입니다.
padding-bottom:100% 라면 정사각형이 되는거에요. 반응형에서 이미지를 배경으로 처리할경우 높이값이 없기때문에 padding값을 주어 공간을 만들어 사용하기도 합니다.
노래하나 듣고 가시죠..^^