유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기

유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기

안녕하세요 TriplexLab 입니다.

오늘은 유튜브(Youtube) 영상 컨텐츠를 16:9비율에 마쳐 반응형으로 만드는 방법에 대해서 살려보도록 하겠습니다.

먼저 유튜브로 가셔서 퍼오고 싶은 영상를 퍼옵니다. 그리고 하단 처럼 수정합니다.

✍️ 유튜브 영상 비율 코드

<div class="video">
  <div>
	<iframe src="https://www.youtube.com/embed/6lkLE3bSrMw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

padding-bottom 계산식은 height / width * 100 입니다.

/* 비디오 컨텐츠를 16:9비율에 마쳐 반응형으로 만들기 */
.video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;}
.video > div{ width: 100%; padding-bottom: 56.25%;} /* padding-bottom 계산식 height / width * 100 */
.video > div iframe{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }

👍 유튜브 영상 비율 결과

유튜브 영상 비율

👉전체 소스코드

전체 소스코드를 github에도 공유합니다.😃🔥

GitHub - younhoso/younhoso