웹페이지 작업을 하다 유튜브 영상 삽입을 위해 iframe 을 사용할 일이 있습니다.
하지만 기본적으로 유튜브에서 공유 버튼을 눌러 iframe 태그 내용을 불러올 수 있지만 기본 사이즈가 정해져 있어 아쉬운 부분이 있습니다.
1. 유튜브 동영상 가져오기
2. 반응형 사이즈에 맞춰 사이즈 조절하기
해당 소스를 바로 복사 붙여넣기하면 반응형에 따라 달라지는 화면 사이즈에 따라 유튜브 화면 공간이 검은 배경 부분으로 잘리기 때문에 해당 문제를 해결하기 위해 아래 코드를 적용해보길 바랍니다.
<div class="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bDKzSXwnfcI?si=sLpNBDuz1nRFvJG8" 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>
.video_container {position:relative;padding-top:56.25%;height:0;width:100%;}
.video_container iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
위 소스들을 사용한다면 반응형 사이즈에 맞춰 자동으로 비율을 늘리고 줄어드는 유튜브 동영상을 추가할 수 있습니다.
유튜브 영상 표준 비율은 가로로 긴 16:9이기 때문에 padding-top:56.25% 를 적용하는 것
'코딩 > HTML ㅣ CSS' 카테고리의 다른 글
마우스 오버시 텍스트 변경 효과 (0) | 2024.09.04 |
---|---|
전체페이지 스크롤 fullpage.js 사용법 알아보기 (0) | 2024.08.27 |
[CSS] 한눈에 보는 Flex 속성 이해하기 (0) | 2024.07.31 |