유연한 테마를 위한 fitVids.js 활용과 단점 보완

fitvids_js

요즘 워드프레스의 Responsive 테마에는 확인해보지 않아 100%라고 말은 못하겠지만 jquery.fitvids.js 라는 파일이 기본적으로 들어가 있는 경우가 많습니다. 이는 jQuery 플러그인으로 비디오를 컨텐츠의 Wrapper에 자동으로 딱 들어맞게 조절해주는 역할을 하기때문에 Responsive 테마에는 필수품이 되어가고 있는 추세입니다.

fitvidsjs.com 을 방문하여 브라우저의 크기를 조절해보세요!

 

보신 것과 같이 비디오 프레임의 크기가 브라우저 크기에 따라 반응하는 것을 볼 수 있습니다.
다운로드는 GITHUB에서 받아보실 수 있는 오픈소스입니다.

이 스크립트 파일을 들여다 보면 정말 간결합니다.
65줄로 이런 것이 가능하다니… jQuery 너무 좋습니다. ^^

하지만 이번 다음뷰 플러그인 개발하면서 한가지 불편한 진실을 알게 되었습니다.
embed를 사용한 플래쉬 추천박스도 같이 커지는 것 입니다. 때마침 gbm43님께서 댓글로 주신 스크린샷을 첨부합니다.

저 공간 어떻게 할꺼니 ㅜㅜ
저 공간 어떻게 할꺼니 ㅜㅜ

이 스크립트는 예외 없이 object, embed된 플래쉬 컨텐츠를 컨텐츠의 가로폭에 맞춰버리는 것입니다.
위의 사진은 뷰버튼을 가로 100%로 키운 것 입니다. 확인해보시려면 공백 부분을 마우스 오른쪽 클릭하시면 바로 알 수 있습니다.
다음과 같은 플래쉬에서만 볼 수 있는 메뉴를 보실 수 있습니다.

daumview_right_click

이를 해결하기 위해 jquery.fitvids.js 파일의 내용을 수정해야합니다.
현재 해당 플러그인이 예외 처리에 대한 항목을 넣어주지 않아 불편하게 처리해야하지만, 추후 예외처리 클래스를 지정해주지 않을까 하는 생각을 합니다.

우선 자신의 Responsive 테마내 jquery.fitvids.js 파일을 찾아 편집모드로 열어야 합니다.
그럼 다음과 같은 소스가 나옵니다.

//적용하지 않을 클래스 추가하기 주석부분을 봐주세요! 그럼 아래와 같은 코드가 있습니다.
저의 경우 qb_not_embeded이란 클래스일 경우 무시하라고 적용했습니다.

이렇게 하면 qb_not_embeded 란 클래스가 적용된 태그안의 embed 태그는 해당 스크립트의 강제 적용을 피해갈 수 있습니다.
추가하고 싶으신 클래스가 있으면 복사하셔서 바로 밑에 추가해주시고 원하시는 클래스로 변경하시면 됩니다.
다음뷰 플러그인의 경우 기본적으로 제가 qb_not_embeded 클래스를 넣어놨으니 위와 같이 적용하시면 피해가실 수 있습니다.

단, 워드프레스 다음뷰 플러그인의 경우 2012년 12월 20일 정오 이전에 1.5버전을 받으신 분은 반드시 삭제하시고 다시 재설치하셔야 하는 점 유의하시기 바랍니다.

 

Published by

안반장

Web과 App 개발을 하고 있으며 최근 워드프레스에 관심이 많아져 네이버 카페 워드프레스 홈페이지의 TF팀으로 활동 중 입니다.개인적으로는 안반장의 개발 노트라는 블로그를 운영하면서 개발의 즐거움과 고충들을 차곡차곡 담아가고 있습니다.

  • 웹하드들어가서 제가 themes-canvas(제 테마)에서 위 파일 jquery.fitvids.js 을 검색했는데 파일검색이 안됩니다. 혹시 수고스러우시겠지만 어느 경로에 그 파일이 있는지 경로를 알려주실수 있을까요??

      • 알려주신 그 파일에서 안반장님 예시대로 저도 똑같이 적용하고 다시 다음뷰플러그인 설치했는데 변경이 안됐어요. 별도로 GITHUB나 플러그인을 설치해야 하는건가요? 저는 적용하지 않을 클래스만 추가하기 이것만 했거든요.순서를 알려주시면 그대로 따라할께요 ^^

        • http://www.sum.pe.kr/wp/wp-content/themes/canvas/includes/js/third-party.js?ver=3.5 이 링크를 눌러보시면 적용하신 부분이 반영이 안되있습니다. 다시 한번 수정하셔서 저장 꼭 하셔요! 그리고 “적용하지 않을 클래스” 부분만 추가하시면 되는거 맞아요!

          • Guest

            if ( $this.closest(‘.qb_not_embeded’).length ) return; 입력되어 있는데요.

          • 방금 적용하셨나부네요 ㅋㅋ 암튼 댓글 감사합니다.

          • 돼요돼요~~~ 아까는 안보였는데 되네요^^ 감사해요