[해피CGI][cgimall] Youtube/Vimeo/HTML5 비디오를 배경으로 사용 jQuery 플러그인 - youtube-Background.js

- 라이센스

MIT




- 사용 방법

1. jQuery 라이브러리와 jquery.youtube-background.js 파일을 호출합니다.

2. 배경 요소를 만들고 배경으로 사용할 Youtube, Vimeo, HTML5 비디오 영상 주소를 data-vbg 옵션에 넣습니다.

3. 그리고 youtube_background 플러그인을 호출하면 끝입니다.

4. 각종 옵션을 제공합니다. (옵션 코드는 사이트를 참고하세요.)

   * 모바일에서 비활성화 여부 (기본값 false)
   * 재생 및 음소거 버튼 표시 여부 (기본값 false)
   * 영상 로드 전 배경 로드 여부 (기본값 true)
   * 페이지 로드 시 비디오 자동 재생 여부 (기본값 true)
   * 페이지 로드시 비디오 음소거 여부 (기본값 true)
   * 비디오 반복 여부 (기본값 true
   * 비디오 해상도 (기본값 16:9)
   * 비디오 오프셋 픽셀 (기본값 200)
   * 플레이어를 아이프레임 컨테이너에 맞게 설정할지 여부 (기본값 false)
   * 아이프레임 및 감싸는 요소에서 inline 스타일을 활성화 여부 (기본값 true)
   * 비디오가 시작되고 끝나는 시간을 초 단위로 설정 (기본값 0)
   * 재생을 자동으로 중지할지 여부 (기본값 false)
   * 초기 볼륨 설정 (기본값 1)
   * 쿠키 비활성화 여부 (기본값 true)
   * 사용자가 처음 상호작용할 때 배터리 절약 모드에서 자동 재생 (기본값 false)
   * 아이프레임 /비디오를 지연 로드할지 여부 (기본값 false)
   * 기본 포스터 이미지 (기본값 null)

 

5. 이벤트 핸들러, API 메소드, 속성을 제공합니다. 사이트를 참고하세요.







- 작동 화면 (샘플 : 지구 배경이 Youtube 영상)