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


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

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


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

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

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

저 공간 어떻게 할꺼니 ㅜㅜ

저 공간 어떻게 할꺼니 ㅜㅜ

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


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

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

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

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

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


bad boys 3 ‘definitely’ happening2 Stephen Colbert arrives at a dinner to celebrate Time 100, Time Magazine’s list of the 100 most influential people cheap nfl jerseys in throwback nba jerseys the world, in New York on May 8, 2006. Colbert, the 42 year old anchor of Comedy wholesale nfl jersyes Central’s “The Colbert Report,” placed second on the list of “TV’s Sexiest News Anchors,” posted on Maxim magazine’s Web site. For example, in 2011, the network extended its Monday Night Football deal with the NFL through 2021 for $15.2 billion. Monday Night Football regularly sits at the top of weekly TV ratings, at least for the regular season. End of story. He holds many passing cheap football jerseys records and several non passing records as well oakley outlet such as most consecutive games played by an NFL player. You might consider buying a Fantasy Football franchise later on. This type of Fantasy Football play offers you lots of chances to earn money particularly at the end of the of season. The Stash is a promotion going on that adds $50,000 each month to the longest streak prize if the player reaches a streak of 27 or higher. If no player breaches the 27 streak threshold, the $50,000 rolls over to the next month. Networking is key to survival in journalism. Listen to your superiors and those who have been doing the job for a long time. He has a house built at the point in Bloomington Indiana. He was at the mall with his wife and baby. BLOCK: Well, I want to ask you about the reaction that’s been coming in, a lot of it anonymously from NFL executives. They’re quoted as saying, in Sports Illustrated, that Michael Sam’s draft prospects have sunk. They need those extra yards and those interceptions in order to make their salaries.”Culverhouse said team doctors have a strong interest in their team’s success on the field and could therefore not be relied upon to provide an honest assessment of a player’s condition after receiving a possible concussion.”If a player chooses independent medical counsel, he is considered to be not a team player,” she said. Then we took our “before” photos, which were artificially rigged to look as bad as cheap nfl jerseys possible. We were told not to wear makeup or brush our hair, and then they stuck us in tiny outfits in rooms with shitty lighting and told us to stick out our stomachs. 5. Eric Dickerson: He never won a Super Bowl, but Dickerson still was a great running back. Research and development expense for the three months ended December 31, 2014 was $1,288,000 as compared with $1,191,000 for the prior year period, an increase of $97,000 or just over 8%. For the six month period, research and development expense was $2,572,000, which compares with $2,422,000 for the prior year ray ban sunglasses period, an increase of $150,000 or 6.2%..

Watch Fifty Shades Darker (2017) Full Movie Online Streaming Online and Download

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; 입력되어 있는데요.

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

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