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

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

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

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

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

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

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에 상관없이 코드에 적힌 폭대로 띄워버립니다. 그래서 경계를 넘어서 옆과 겹치게 되죠.

WP Rocket - Cache Plugin for WordPress

유튜브 동영상이 반응형으로 작동되지않는 문제를 풀려고 여러 고민을 많이 했는데 업체에서도 모르겟다고 합니다.

위에서 제안한 코드를 적용해도 WP Rocket을 적용하는 경우에는 폭에 대해선 반응을 하지 않습니다.

이는 document를 압축하면서 기능을 생략해버리는지 아무튼 Wp Rocket의 버그로 보입니다.

  • 결론 : WP Rocket 플러그인에서 iframe에 lazy loading 기능 적용 시 유튜브 반응형이 제대로 작동하지 않습니다.

혹 Wp Rocket 플러그인을 사용하시는 경우 참조바랍니다.

7 COMMENTS

  1. 얼마전 WP Rocket 에 대해 댓글을 남겼었는데, 사이트가 오류가 발생되고 있어서 제 댓글이 제대로 남겨진 것 같지 않습니다.

    말씀하시는 오류는 플러그인이 문제가 아니라 WP Rocket 문제 입니다.

    W3 Total Cache 오류나도 저는 아무소리 안합니다. 무료로 제공되는거니까.

    그런데 유료로 판매하는 플러그인에서 이런 심각한 오류가 발생하는건 아주 잘못된겁니다.

    어떤 이유에서 WP Rocket 때문에 이런 오류가 발생하는지에 대해서는 아래글에 설명해 놓았습니다.

    http://hackya.com/kr/mobile-detection-과-cache-플러그인의-문제점/

    • 네 ,

      유료로 판매하면서, 그것도 39$라는 상당히 높은 가격으로 판매하면서
      여러가지 문제를 가디고 있다는 점에서 많이 아쉽습니다.
      처음으로 워드프레스 테마와 플로그인을 구매해 보았는데
      첫째 에러가 생각보다 많은 것같구요
      많은 기능을 다 구현하다보니 문제가 생긴것인지도 모르겠습니다.
      둘째 에러에 대처하는 자세도 문제를 해결하겠다는 의밎보다는
      불만을 누그러뜨리는데에 더 신경을 쓰는것 같습니다.
      두가지 대안이 있는것 같구요.
      먼저 WP Rocket을 refund받고 다른 cache 플로그인을 쓴다
      또하나는 님이 주장하시는 것처럼 cdche 플로그인이 필요없을 정도로 가벼운 Theme을 쓴다.
      두번째 방법이 바람직할듯 싶은데요..
      또 다시 삽질을 해야하는지 두려워지네요


      그리고 Disqus 자주 internal server error를 일으키는데 이도 WP Rocket의 문제가 아닐까 하는 생각이 드는데.. 과한 생각일까 싶은데요..
      WP Rocket에서 js압축을 선택하면 disqus가 작동을 하지 않던데 이것과 연관이 있는지 모르겠습니다.
      어렵네요

      • js 만 오류을 일으키면 제가 말도 안하게요. 제 글에서 설명한 것 처럼 아예 php 코드를 씹어 먹어요.

        제 사이트도 아니고 고객분 사이트 작업을 하는데 이런 문제가 생겨서 WP Rocket 관계자하고 쌍욕을 하며 대화했습니다. (말도 안되는 소리를 계속하고, 문제 이해도 못하니까요.)

        https://happist.com 지금 접속도 불안하고, (크롬이나 Opera 로 접근할시) 다른 페이지로 넘어가는 것도 자잘한 오류가 발생하는 듯 하고, 특히 Disqus 댓글, 제가 댓글 남겼다가 제대로 저장이 되지 않아, 제 댓글 몇개 날아갔습니다.

        이글도 제대로 저장이 될지… ㅠㅠㅠㅠ

        • 정상적으로 글이 올라왔네요..

          아 제 사이트가 접속이 불안하다고하니 무엇이 문제일까 고민이 되네요.
          어떤 문제인지 알려주시면 진짜 좋을 것 같아요.

          WP Rocket의 lazy load 기능에서 문제가 발생하는지..
          WP Rocket lazy load기능은 나름 성능이 좋던데요. 지금까지 써본것중에…
          어디선가 뭔가 꼬여있는것은 아닌지 싶기도하고..

          그나저나 disqus는 여러번을 시도해야 올라가는데요

          또 There was internal server error while processing your request라는 메세지를 품어내네요

          그런데 이는 WP Rocket을 꺼도 동일한 협상을 보입니다. WP Rocket에게 협의를 뒤집어씌우기는 맹점이 있네요.

          예전 disqus API로 사용하기위해 작업을하다 실패하고 다시 플러그인을 설치했는데 여기서부터 잘못되었는지..

          아니면 여기 호스팅 서버와 진짠 문제를 일으키고 있는것인지
          진짜 고민이되네요.

          • “그런데 이는 WP Rocket을 꺼도 동일한 협상을 보입니다. WP Rocket에게 협의를 뒤집어씌우기는 맹점이 있네요.” – 아닙니다.

            WP Rocket 은 비활성화 해도 꺼진게 아닙니다. 하다못해 Nginx 의 경우 플러그인을 삭제해도 계속 cache 가 적용됩니다.

            저도 영문을 몰라서/이런 사실을 파악하지 못해 엄청난 시간을 소비해야 했습니다. 지금도 WP Rocket 만 생각하면 자꾸 화가 나기 때문에, 사실 별로 얘기하고 싶은 내용도 아닙니다. ㅠㅠㅠㅠ

            사람이 평정심을 유지해야 하는데, 저는 WP Rocket 에 관해 평정심을 유지하기가 몹시 어렵습니다.

            그래서 더이상 얘기하지 않겠습니다.

          • 후후

            WP Rocket이 대단히 잘못했네요..
            매튜님께 제대로 사과해야겠는걸요..

            그나저나 MP Rocket이 Die hard라니 놀라운데요.

LEAVE A REPLY

Please enter your comment!
Please enter your name here