[Blog] Youtube 영상 크기 자동으로 크기 조정 (줄이기)

안녕하세요 

마푸입니다. 

어제 퇴근하면서 집에가는데 핸드폰으로 블로그를 체크하고 있었는데 

제 블로그 특성상 유튜브(Youtube) 영상을 많이 올리는데 

문제는 이 영상이 모바일 창의 가로 사이즈를 초과한다는 겁니다. 

음.. 자동으로 줄일 수 없을까 고민하다가 구글링 해보니 바로 자료가 나오네요 ^^

제 블로그 기준으로 적용전의 페이지를 보면 

> 먼저 변경 전 티스토리 블로그의 이미지입니다. 

아래 이미지를 보시면 동영상이 옆으로 짤려 보입니다. 사실 이만큼 더 먹기 때문에 

창이 가로로 커져있는 상태이지요 실제로 옆으로 스와이핑하면 빈영역이 노출됩니다.

(아주 보기싫어요 ㅠ.ㅠ)

> 변경 후 티스토리 블로그의 이미지 입니다. 

이런식으로 창 크기에 맞게 줄어들어진 동영상을 볼 수 있습니다. 

꺄핫.. 

자.. 그럼 이제부터 적용을 해보겠습니다. 

먼저 관리 페이지에서 html 코드 창으로 이동해보겠습니다. 

이제 좌측 항목에 html을 선택 해 보겠습니다. 

먼저 HTML에서 찾기를 통해서 "Jquery.min.js" 파일이 있는지 확인 해봅시다. 

만약 이미 이파일을 불러오고 있다면 다음 단계로 넘어가시면 되고 없다면 js파일을 로드하는 다른 구문 아래다가 살짝 추가하도록 하겠습니다. 

* 아래의 코드를 추가합시다

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

 이제 유튜브 영상을 실제로 리사이즈 해주는 코드를 입력할 건데요 여저히 HTML 수정 창에서 진행합니다. 

찾기를 통해서 </body> 구문을 찾으시고 바로 위쪽에 아래의 코드를 입력해 줍시다. 

<script type="text/javascript">
 
/*
 * Youtube video auto-resizer script
 * Created by Skipser.com
*/
  
$(document).ready(function() {
    if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
        YOUTUBE_VIDEO_MARGIN=5;
    }
    $('iframe').each(function(index,item) {
        if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
            var w=$(item).attr('width');
            var h=$(item).attr('height');
            var ar = h/w*100;
            ar=ar.toFixed(2);
            //Style iframe    
            $(item).css('position','absolute');
            $(item).css('top','0');
            $(item).css('left','0');    
            $(item).css('width','100%');
            $(item).css('height','100%');
            $(item).css('max-width',w+'px');
            $(item).css('max-height', h+'px');        
            $(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
            $(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
        }
    });
});
 
</script>
 

이제 모든 작업이 끝났습니다. 저장 버튼을 누르시고 테스트를 진행 해 보시면 됩니다. 

저장하기 잊으시면 안되요 ^^

참고로 이렇게 진행을 했음에도 불구하고 사이즈가 조절이 안된다면 

링크의 방법을 바꾸셔야합니다. 

보통 유튜브를 링크 거실때 에디터에서 "외부컨텐츠"를 이용하실 껀데요 

그중 소스코드를 이용한 추가 방법인 "html(embed,object 소스입력)"에만 적용이됩니다. 

유튜브 창이 iframe 인걸 이용해서 리사이즈 하는 방법이기 때문입니다. 

즉, 지금 소개해드리는 방법으로 동영상을 리사이즈 하기 위해서는 아래와 같이 유튜브에서 영상을 클릭하고 공유할때 아래의 방법으로 공유해야합니다. 

 출처

「유튜브 동영상 크기 자동 리사이즈, 반응형으로 만들기 - 따블류 랩」 https://lab.hv-l.net/?document_srl=172364