유튜브 영상 반응형 리사이즈하는 JavaScript 코드

유튜브 영상을 반응형으로 리사이즈하는 JavaScript 코드에 대해 알려드리려고 합니다. 이 코드를 사용하면 유튜브 영상이 모바일 및 데스크탑 화면 크기에 맞게 조정되어 사용자들에게 보다 편리한 시청 환경을 제공할 수 있습니다.

 

 

반응형 리사이즈 로직 반영 전

제 블로그를 모바일에서 확인하면, 유튜브 영상의 높이가 고정되면서 영상 비율이 깨지는 현상을 확인할 수 있습니다.

	유튜브 재생 전	유튜브 재생 후

 

 

반응형 리사이즈 로직 반영하는 방법

티스토리 관리자 화면에서 "꾸미기 > 스킨 편집"을 클릭하여 HTML 편집 모드로 들어갑니다. 그리고 아래의 소스 코드를 </body> 태그 바로 앞에 추가합니다.

<!-- 유튜브 반응형 스크립트 Start -->
<script>
  $(window).resize(function() {
    resizeYoutube();
  });
  $(function() {
    resizeYoutube();
  });

  function resizeYoutube() {
    $("iframe").each(function() {
      if (/^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src"))) {
        $(this).css("width", "100%");
        $(this).css("height", Math.ceil(parseInt($(this).css("width")) * 480 / 854) + "px");
      }
    });
  }
</script>
<!-- 유튜브 반응형 스크립트 End -->

 

위의 코드는 유튜브 영상이 포함된 HTML 페이지가 로딩된 후에 실행되며, 유튜브 영상의 가로 크기를 100%로 설정하고 세로 크기를 가로 크기에 맞게 계산하여 조정합니다. 이를 통해 유튜브 영상이 다양한 화면 크기에서 최적의 비율로 보여질 수 있습니다.

 

 

반응형 리사이즈 로직 반영 후

위의 소스 코드를 반영한 후 모바일에서 블로그를 확인한 결과, 유튜브 영상이 깔끔하게 비율에 맞게 조정되어 보입니다.

	유튜브 재생 전	유튜브 재생 후

 

 

그 외 참고사항

일부 블로그에서는 아래의 소스 코드를 추가하는 경우도 있습니다. 하지만 해당 소스의 역할을 명확히 파악하지 못하여 저는 주석 처리해두었습니다.

  // 더보기 버튼 작동 시
  $(function (){
    $(".btn-toggle-moreless").click(function (){
      setTimeout(function() {
        resizeYoutube();
      }, 1);
    });
  });

 

참고 사이트

https://coingosu.net/635

유튜브 동영상 반응형 웹에 삽입하는 방법