etc 유튜브 높이값 자동조절하기
페이지 정보
작성자 디블랙 작성일 25-05-20 21:59 조회 290 댓글 0본문
.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값을 주어 공간을 만들어 사용하기도 합니다.
노래하나 듣고 가시죠..^^
.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값을 주어 공간을 만들어 사용하기도 합니다.
노래하나 듣고 가시죠..^^
관련링크
댓글목록 0
등록된 댓글이 없습니다.