jQuery YouTube background navigation 플러그인

프로젝트 중 풀 페이지 유튜브 배경에 내비게이션을 클릭하면 영상이 바뀌게 개발해야 하는 부분이 있어, YouTube Player API 문서를 참고하여 메뉴가 달린 jQuery YouTube 플러그인 ytbgnav.js를 만들어 보았습니다.

ytbgnav.js 기능

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

Demo

풀페이지 데모 : https://iluku.net/youtube/index.html
높이지정 데모 : https://iluku.net/youtube/index.html?h=600
파일 다운로드 : GitHub

추가설명

영상 영역의 높이와 배경영상을 레이어 팝업에 노출하는 방법은 아래와 같습니다.

1. 높이지정 방법

css\ytbgnav.css

body{height:/* fix here */;
     font-family:tahoma, 'NanumBarunGothic', dotum, sans-serif}

2. 배경영상 레이어팝업 노출

js\ytbgnav.js

// 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();
});