Categories
Web

유튜브 동영상 크기 자동 리사이즈, 반응형으로 만들기

Screen Shot 2015-10-24 at 03.50.54.png

 

부제: 곶토의 아이폰 구입썰

 

 

 

동영상이 페이지 영역을 벗어난다

IMG_9860.PNG

[ 이미지 제공 ㅡ 곶토의 실험실 by. 곶토 ]

 

 

아이폰에서 유튜브 동영상이 가로 해상도를 초과하는 바람에 페이지가 비정상적으로 표시된 모습이다.

meta tag viewport 라는 꼼수를 사용하면 페이지가 틀어지는 문제를 해결 할 수 있으나 이것은 근본적인 해결책이 아니다.

 

 

 

자동 리사이즈 스크립트 적용

이 스크립트를 적용하려면 우선 Jquery가 로드되어야 한다.

XpressEngine 같은 경우 코어에 Jquery가 포함되어 로드되므로 별도로 로드시킬 필요가 없다.

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

 

 

구글 CDN을 통해 Jquery를 로드시키자.

 

<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>

 

그리고 위 코드를 </body> 가 끝나는 바로 위에 추가하시든 ! 적절한 위치에 추가하면 된다.

참고로 이 코드는 유튜브 소소크드를 아이프레임으로 했을때만 적용된다.

 

0299.PNG

 

이러한 형식의 코드만 적용된다는것이다.

 

위 자동 리사이즈 코드를 살펴보면 each 함수를 통해 iframe 을 제껍니다한다.

이때 .attr() 함수로 src 값을 가져온뒤 정규식으로 youtube 링크이면 이후의 css 코드를 적용한다.

 

 

 

 

적용 후

 

0300.PNG

 

개발자 도구로 확인해보면 이렇게 유튜브 동영상이 영역을 벗어나지 않고 포스트 영역에 잘 박혀있다.

 

 

 

 


 

참조

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.