jQuery YouTube background navigation 유튜브 배경 + 메뉴 플러그인 ytbgnav.js

프로젝트 중에 풀 페이지 유튜브 배경에 내비게이션에 따라 영상이 바뀌게 구현해야 하는 부분이 있어, YouTube Player API 문서를 참고하여 메뉴가 달린 YouTube 배경을 만들어 보았습니다. 이후에도 자주 사용하게 되어 뿌듯하네요^^

ytbgnav.js 기능

• 영상이 끝나면 다음 영상으로 자동재생(마지막 영상이 끝나면 처음으로 이동)
• 플레이 아이콘을 누르면 현재 재생되고 있는 배경을 레이어팝업(Modal dialog box)으로 노출
• 배경영상 음소거 버튼 추가

Demo

풀페이지 데모: http://iluku.net/youtube/index.html
높이지정 데모: http://iluku.net/youtube/index.html?h=600

GitHub: https://github.com/moonspam/jQuery-Youtube-background-navigation

추가설명

배경영상을 레이어팝업에 노출 방법

css\ytbgnav.css

?

1 2 3 4 5 6 7

// popID[_curClick]을 bgID[_curClick]으로 변경 $(".btn_pop").live("click",function() {     player.pauseVideo();     $(".pop_yt iframe").attr("src", "https://www.youtube.com/embed/"+ bgID[_curClick] +"?rel=0&autoplay=1;&wmode=opaque");     $(".pop_yt").show();     $(".pop_overlay").show(); });