디자인팁

유튜브 비동기식 팝업창

페이지 정보

작성자 BSAA 작성일16-04-15 17:01 조회16,160회 댓글0건

첨부파일

본문

링크를 클릭시 해당 유튜브 영상으로 레이어 팝업창이 나오게하는 기능입니다.

자동플레이와 수동플레이 방식 두가지로 나눠지게 됩니다.

 

샘플 : http://sianup.designcorea.co.kr/script_sian/YouTube_PopUp/index.html 

 

index.html 파일

 

<script type="text/javascript">

jQuery(function(){ <---- a태그 링크를 클릭시 이벤트를 건다

jQuery("a.bla-1").YouTubePopUp(); a태그 클레스 네임을 클릭시 비동기식 레이어 팝업창이 나오게 합니다. 자동플레이로 재생 

jQuery("a.bla-2").YouTubePopUp( { autoplay: 0 } ); // Disable autoplay <--- 해당 클레스 네임을 클릭시 수동플레이로 재생 (숫자는 재생 반복회수)

});

</script> 

 

자동플레이

<a class="bla-1" href="https://www.youtube.com/watch?v=S-uWz5MZ9i0">This YouTube video with autoplay</a> and

수동플레이

<a class="bla-2" href="https://www.youtube.com/watch?v=S-uWz5MZ9i0">This YouTube video without autoplay</a> 

 

해당 파일안에 YouTubePopUp.css 이 파일은 필수로 넣어야합니다.

인식 파일 

YouTubePopUp.jquery.js

YouTubePopUp.css

 

 

 

댓글목록

등록된 댓글이 없습니다.