유연한 테마를 위한 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버전을 받으신 분은 반드시 삭제하시고 다시 재설치하셔야 하는 점 유의하시기 바랍니다.