ytbgnav.js cover

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

ytbgnav.js 기능

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

Demo

풀페이지 데모 : http://iluku.net/youtube/index.html

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

moonspam/jQuery-Youtube-background-navigation

jQuery-Youtube-background-navigation – jQuery plugin that lets you create background videos using youtube api and control navigation.

추가설명

* 높이지정 방법

css\ytbgnav.css

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

js\ytbgnav.js

스폰서 링크