2024년, 웹사이트에 반응형 유튜브 비디오 추가하기

유튜브 영상을 웹사이트에 넣기위한 방법은 여러해 동안 다양한 방법이 동원되었습니다.

하지만 이제 아래 코드만으로 반응형 웹페이지까지 한번에 처리 가능합니다.

 

CSS 마크업

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

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

 

비디오 태그

<div class="video-container">
  <iframe
    src="https://www.youtube.com/embed/kasdfjlDI"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope;"
    allowfullscreen></iframe>
</div>

 

종횡비 속성 CSS 추가하기

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

 

마지막으로 iframe에 클래스(.video) 를 적용합니다. .video 클래스명은 원하대로 수정가능합니다.

<iframe
  class="video"
  src="https://www.youtube.com/embed/asldkfjdskO"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope;"
allowfullscreen></iframe>

 

이상 반응형 웹사이트까지 한번에 처리되는 유튜브 영상 웹페이지에 넣는 코드를 알아봤습니다.