티스토리에서 'Youtube 동영상 첨부 시' Jquery로 반응형 처리하는 방법입니다.
글쓰기 에디터에서 동영상을 첨부했을때입니다.
위처럼 동영상 첨부를 하게 될 경우 해상도가 줄어들면 영상 사이즈가 고정되어 있어서 줄어들지 않습니다.
위 문제를 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을 창 크기에 맞게 조절하여 반응형 처리를 합니다.
