[자바스크립트, CSS] 유튜브 등의 비디오를 반응형으로 감싸기

앞서 작성한 요소를 일정 비로 감싸기와 유튜브 세로 영상 퍼오기를 확인하시면 더 간단히 이해하실 수 있습니다.

Github 링크

가장 기본적인 16:9로 감싸는 건 유튜브 뿐  아니라 카카오 TV, 네이버 TV 등도 지원합니다.

하지만 9:16 비디오, 4:3 비디오, 1:1 비디오 등은 유튜브에서밖에 테스트하지 않았습니다.

작동 확인은 여기서 하시거나 아래 이미지 목록을 펼쳐주세요.

JS

$("iframe").each(function() {
  var a = $(this).attr("width"),
      b = $(this).attr("height");
 
  if (a / b === 16 / 9) {
    $(this).wrap("<div class=\"resvid\"></div>")
  }
 
  if (a / b === 9 / 16) {
    $(this).wrap("<div class=\"resvid alt\"></div>")
  }
 
  if (a / b === 4 / 3) {
    $(this).wrap("<div class=\"resvid old\"></div>")
  }
 
  if (a === b) {
    $(this).wrap("<div class=\"resvid square\"></div>")
  }
})

* html 내부의 모든 iframe을 대상으로 스크립트가 실행됩니다. 특정 요소 아래의 iframe에만 적용하고 싶다면 .class iframe 혹은 #id iframe으로 변경하시고 특정 사이트의 비디오만 변경하시려면 iframe[src*=youtube] 같은 식으로 변경하시면 됩니다.

CSS

.resvid {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: auto
}


.resvid iframe {
  position: absolute;
  width: 100%;
  height: 100%
}


.resvid.alt {
  width: 35%;
  padding-bottom: 62.22%
}


.resvid.square {
  width: 70%;
  padding-bottom: 70%
}


.resvid.old {
  width:80%;
  padding-bottom:60%
}


@media screen and (max-width:1000px) {
  .resvid.alt {
    width: 50%;
    padding-bottom: 88.89%
  }
  
  .resvid.old {
    padding-bottom:75%
  }
}


@media screen and (max-width:600px) {
  .resvid.alt {
    width: 100%;
    padding-bottom: 177.78%
  }


  .resvid.square {
    width: 100%;
    padding-bottom: 100%
  }
}