[워드프레스 Tips]플러그인 없이 유튜브 100% 반응형 적용법

워드프레스에 유튜브동영상을 삽입 시, 요즘 유튜브는 반응형을 지원하고 워드프레스 자체에서도 반응형을 지원해 자동으로 크기를 맞추어줍니다.

그러나 기본적으로 정해진 높이가 있으므로 높이를 높게 설정되어 있는 경우 위아래는 검게 표시되어 알게 모르게 눈에 거슬리는 경우가 왕왕 있습니다.

그리고 일부 테마의 경우 유튜브 반응형 지원에 문제가 있는 경우도 있고 오래전 코드의 경우는 제대로 작동이 안되는 경우도 있습니다.

이를 해결하기 위해서는 이를 해결해주는 플러그인을 쓸 수도 있겠지만 아래와 같이 몇가지만 수정해주면 깔끔하게 좌우, 아래를 정확히 맞추어 유튜브 등 동영상을 재생시켜 볼 수 있습니다.

제간 인터넷 검색을 통해서 발견한 방법은 2가지가 있는데 적절한 방법을 사용해 보시기 바랍니다.

Table of contents 목차 보이기

1. functions.php 및 style.css 변경

첫번째 방법은 워드프레스에서 테마의 functions.php 및 style.css의 변경을 통해서 유튜브등의 동영상을 반응형을 구현하는 방안입니다.

이 방법은 iframe code를 사용하는 YouTube or Vimeo등에 유용하다고 할 수 있습니다.

1.1. 테마의 functions.php 수정 – embed codes에 div를 기본으로 붙여주도록 수정

테마의 functions.php파일에 아래 내용을 추가합니다.
아래 기능은 iframe code에 div code를 입혀주도록 해주는 기능정의입니다.

function div_wrapper($content) {
    // match any iframes
    $pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
    preg_match_all($pattern, $content, $matches);

    foreach ($matches[0] as $match) {
        // wrap matched iframe with div
        $wrappedframe = '<div>' . $match . '</div>';

        //replace original iframe with new in content
        $content = str_replace($match, $wrappedframe, $content);
    }

    return $content;    
}
add_filter('the_content', 'div_wrapper');

이는 워드프레스 개발자 포럼의 How to wrap an element around an iframe or embed in content automatically?라는 글을 참조했습니다.

Make WordPress default video embeds responsive라는 글에서도 functions.php 수정 방법도 나오는데 저의 경우는 작동하지 않았고 뎃글을 보면 작동하지않고 추가로 보완이 필요하다는 지적이 있었습니다.

혹시 모르니 여기서 같이 소개해봅니다.

/*  Add responsive container to embeds
/* ------------------------------------ */ 
function alx_embed_html( $html ) {
    return '<div class="video-container">' . $html . '</div>';
}

add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

1.2. style.css 수정 – 반응형으로 작동하도록 CSS code 수정

이제는 반응형으로 작동하도록 style.css 파일을 수정합니다.

수정 코드는 아래…

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

이 style.css 수정방법은 Make WordPress default video embeds responsive라는 글을 참조하였습니다.

2. Custom Javascript 사용 방법

이 방법은 Fluid Width Video라는 글을 참조로 소개드립니다.

이 글에서 iframe을 사용하는 YouTube or Vimeo의 동영상을 반응형으로 적용하는 것 뿐만이 아니라 object/embed 코드를 사용하는 Viddler or Blip.tv 등 그리고 video 코드를 사용하는 HTML5에서도 적용할 수 있는 방안을 찾고 있습니다.

여기에서 제안하는 코드는 아래와 같습니다.

코드 소개는 DEMO: Fluid Width Video글 참조하세요

$(function() {

    var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");

    $allVideos.each(function() {

      $(this)
        // jQuery .data does not work on object/embed elements
        .attr('data-aspectRatio', this.height / this.width)
        .removeAttr('height')
        .removeAttr('width');

    });

    $(window).resize(function() {

      var newWidth = $fluidEl.width();
      $allVideos.each(function() {

        var $el = $(this);
        $el
            .width(newWidth)
            .height(newWidth * $el.attr('data-aspectRatio'));

      });

    }).resize();

});

3. WP Rocket과의 호환성

저의 경우 WP rocket 플러그인을 사용하고 있습니다.
이 플러그인은 성능은 몇가지에서 에러를 가지고 있습니다.

첫번째로 JS 압축기능을 사용하면 Disqus 플러그인과 충돌을 일으킵니다.
두번째로는 iframe에 lazy load 기능을 작동시키면 유튜브의 반응형으로 띄워지는 것을 막는 것 같습니다. layout에 상관없이 코드에 적힌 폭대로 띄워버립니다. 그래서 경계를 넘어서 옆과 겹치게 되죠.