iframe으로 첨부된 동영상 컨텐츠 영역에 맞게 보여주기

모바일 페이지 작업을 하다보면, 아니 꼭 모바일 페이지가 아니더라도 iframe 등을 이용해 동영상을 첨부했을 때 실제 컨텐츠 영역보다 영상의 width가 크다면 문제가 될 때가 있다. 이럴 때 사용하기 위해서 간단한 jQuery 플러그인을 작성했다.

(function($) {
    $.fn.fitVideo = function(option) {
        var selectors = [
            "iframe[src*='player.vimeo.com']",
            "iframe[src*='youtube.com']",
            "iframe[src*='youtube-nocookie.com']",
            "iframe[src*='naver.com']",
            "iframe[src*='daum.net']",
            "iframe[src*='pandora.tv']",
            "iframe[src*='nate.com']",
            "object",
            "embed"
        ];

        var cfg = {
            selectors : selectors.join(', ')
        };

        var $this = this;

        return $this.each(function() {
            var $videos = $(this).find(cfg.selectors);
            var wrap_width = $this.width();

            $videos.each(function() {
                if(this.tagName.toLowerCase() === 'embed' && $(this).parent('object').length)
                    return true;

                var next = false;
                if(this.tagName.toLowerCase() === 'object' || this.tagName.toLowerCase() === 'embed')
                    next = true;

                if($(this).data("aspect") == undefined && !$(this).next("span").length) {
                    var w = parseInt($(this).attr("width"));
                    var h = parseInt($(this).attr("height"));
                    var $el = $(this);

                    if(next == true) {
                        if(!$(this).next("span").length)
                            $(this).after("<span style=\"display:none;\"></span>");

                        $el = $(this).next("span");
                    }

                    $el
                       .data("width", w)
                       .data("aspect", (h / w));
                }

                var width, height;
                var el_width = $(this).data("width");
                var el_aspect = $(this).data("aspect");

                if(next == true) {
                    el_width = $(this).next("span").data("width");
                    el_aspect = $(this).next("span").data("aspect");
                }

                if(parseInt(el_width) > wrap_width) {
                    width = wrap_width;
                } else {
                    width = el_width;
                }

                height = parseInt(el_aspect * width);

                $(this)
                    .attr({
                        width: width,
                        height: height
                    });
            });
        });
    };
}(jQuery));

사용법 : $(“#video”).fitVideo();

컨텐츠 영역에 있는 iframe 등의 동영상 엘리먼트의 기본 width 값과 가로 세로 비율을 data 메소드를 이용해 각각 저장하고 컨텐츠 영역의 넓이에 맞춰서 동영상 엘리먼트의 width, height 값을 계산해서 다시 적용해주는 것이다.

2013-11-20 18:15 추가 object를 이용해서 동영상을 첨부했을 때 크롬 등에서 동영상이 제대로 보이지 않는 오류 수정