[해피CGI][cgimall] 배경에 youtube 동영상 적용하기 tubular v1.0.1

상단 소스다운로드를 이용하시거나 아래 URL에서 다운받으실 수 있습니다.
https://code.google.com/archive/p/jquery-tubular/downloads


유투브영상을 출력할 페이지에 스크립트 소스 3줄을 추가합니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>

div 영역에 id 값 wrapper 값으로 적용을 합니다.

<div id="wrapper">

그 후 /js 폴더의 index.js 파일에 출력할 영상 ID 값을 적용하시면 됩니다.

var options = { videoId: 'youtubeID값', start: 3 };

youtubeID값 은 youtube 사이트에서 재생화면으로 접속을 한 후 URL이나
소스공유하기시에 적용된 ID 값을 사용하시면 됩니다.



※ youtube 고유ID값이 abcd123 이라면 var options = { videoId: 'abcd123 ', start: 3 }; 으로 적용하시면 됩니다.

추가적으로 재생, 멈춤 볼륨업다운, 음소거 등의 메뉴를 추가하여 사용할 수 있습니다.
<a href="#" class="tubular-play">Play</a>
<a href="#" class="tubular-pause">Pause</a>
<a href="#" class="tubular-volume-up">Volume Up</a>
<a href="#" class="tubular-volume-down">Volume Down</a>
<a href="#" class="tubular-mute">Mute</a>


※ MIT License 라이센스를 따르고 있으나 사용시에는 라이센스 확인 후 사용하세요 ^^