jQuery 플러그인 fitVideo.js를 워드프레스에서 사용하기

가끔 포스트에 유튜브 동영상을 첨부하곤 하는데 오늘 모바일로 접속해서 확인해보니 사이즈가 변경되지 않는 것을 확인하고 이전에 만들었던 플러그인 fitVidoe.js 를 워드프레스에 적용하기로 했다. 우선 아래는 이전에 만들었던 fitVideo.js 의 소스코드이다.

(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));

 WordPress 에서 적용하기 위해서는 아래와 같이 사용하면 된다. 테마의 functions.php 파일에서 fitVideo.js 파일을 추가해준다. fitVideo.js 파일은 테마의 js 폴더에 생성한 것으로 한다.

<?php
if ( is_singular() ) {
    wp_enqueue_script( 'fitVideo', get_template_directory_uri() .'/js/fitVideo.js', array( 'jquery' ), '1.0', true );
}
?>

is_singular() 함수를 이용해 포스트의 내용보기 일 때만 플러그인이 로드뢰도록 했다. 그런 다음 fitVideo.js 제일 하단에 아래 내용을 추가해준다. selector는 이 블로그 테마 기준이다.

jQuery( function($) {
    $("#content article.single-post-article").fitVideo();

    $(window).on("resize", function() {
        $("#content article.single-post-article").fitVideo();
    });
});

스크립트를 추가하고 모바일로 접속해보면 컨텐츠 영역의 크기 변화에 따라 동영상의 크기가 달라지는 것을 확인할 수 있다.