• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기
Front-end/Jquery

[Jquery]티스토리 Youtube 동영상 첨부시 반응형 처리하기

by 빽짱구 2023. 12. 7.
본문글자

티스토리에서 'Youtube 동영상 첨부 시' Jquery로 반응형 처리하는 방법입니다.

글쓰기 에디터에서 동영상을 첨부했을때입니다.

티스토리 에디터를 통해 Youtube 동영상 첨부

 

위처럼 동영상 첨부를 하게 될 경우 해상도가 줄어들면 영상 사이즈가 고정되어 있어서 줄어들지 않습니다.

위 문제를 Jquery로 자동으로 리사이징 해주는 방법이라고 이해하시면 됩니다.

 

스킨 수정

1. 티스토리 로그인 후 '꾸미기 > 스킨 편집'으로 접근합니다.

2. 스킨 편집 HTML에서 </head> 위에 아래 코드를 삽입합니다.

 

<script type = "text/javascript" >
$(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>

 

참고용 스크린샷

 

'저장' 버튼을 누릅니다.

 

반응형

 

 

코드 설명

해당 JavaScript 코드는 jQuery를 사용하여 YouTube 비디오를 리사이즈하는 함수를 정의하고, 창 크기가 변경될 때와 문서가 로드될 때 이 함수를 호출하는 이벤트 핸들러를 설정합니다.

- $(window).resize(function() {...});: 창 크기가 조절될 때마다 실행되는 함수를 정의합니다.
- $(function() {...});: 문서가 로드될 때 실행되는 함수를 정의합니다.
- resizeYoutube(): YouTube 비디오를 리사이즈하는 함수를 정의합니다.
- $("iframe").each(function() {...});: 모든 <iframe> 요소에 대해 반복하는 함수를 정의합니다.
- if (/^https?:\/\/http://www.youtube.com\/embed\//g.test($(this).attr("src"))) {...}: YouTube 비디오를 포함하는 iframe 요소를 확인합니다.

- YouTube 비디오를 포함하는 iframe의 소스(src) 속성이 "https://www.youtube.com/embed/"로 시작하는지 확인합니다.
- $(this).css("width", "100%");: 현재 iframe 요소의 너비를 100%로 설정합니다.
- $(this).css("height", Math.ceil(parseInt($(this).css("width")) * 480 / 854) + "px");: 현재 iframe 요소의 높이를 계산하여 설정합니다. YouTube 비디오의 기본 높이인 480px를 기준으로 너비의 비율을 유지합니다.

 

이 코드는 YouTube 비디오를 포함하는 iframe을 창 크기에 맞게 조절하여 반응형 처리를 합니다.

728x90

'Front-end/Jquery'의 다른글

  • 현재글[Jquery]티스토리 Youtube 동영상 첨부시 반응형 처리하기