위토즈 - 개발자프로그램판매공간

정보공유

[JQUERY] 유투브 영상 바로실행하고 영상위에 텍스트 올려서 링크 걸기.

 

 

9ecff5aaeeeef1effa6234dee43d5c7e_1533105164_1642.png
 

 

 

jquery.flexslider.js 다운로드 : https://gist.github.com/yatil/5982871 

jquery.youtubebackground.js 다운로드 : https://github.com/rochestb/jQuery.YoutubeBackground 

 

 

<style>

#wr_vod { margin: 0; padding: 0; list-style: none; overflow: hidden; position: relative; font-size: 0; line-height: 0; }

#wr_vod .slides { height: 1080px;margin: 0; padding: 0; list-style: none; font-size: 0; line-height: 0; }

#wr_vod .slides a { display: block; }

#wr_vod .slides video { height: 100%; }

#wr_vod .slides .txt { width: 100%; margin: 0; padding: 0; display: inline-block;text-align: center; position: absolute; top: 48%; left: 0; font-size: 50pt; color: #fff; line-height: 1; letter-spacing: -1px; font-weight: 800;z-index: 100;}

#wr_vod .slides .txt img {max-width:100%;}

#wr_vod .slides .bgVideo {position: relative;background: transparent;z-index:0}

#wr_vod .slides .bgVideo-cover {position:absolute;top:0;left:0;z-index:1;width:100%;height:100%}

#wr_vod .slides .ytplayer-container{position:absolute;top:0; z-index: -1;}

 

@media (max-width: 767px) { /* xs */

#wr_vod .slides { height: 300px;}

#wr_vod .slides .txt { font-size: 25pt;}

 

}

</style>

 

 

<section class="bx-vod text-center">

 

    <script type="text/javascript" src="./jquery.flexslider.js"></script>

    <script type="text/javascript" src="./jquery.youtubebackground.js"></script>

    

    <article id="wr_vod">

        <div class="slides">

            <a href="#none">

                <p class="txt">안녕하세요</p>

                <div class="bgVideo" id="bgVideo1"></div>

                <div class="bgVideo-cover"></div>

            </a>

        </div>

    </article>

 

    <script type="text/javascript">

    jQuery(function($){

        $('#bgVideo1').YTPlayer({

            fitToBackground: true,

            videoId: 'pDljLQQ2-zY',

            loop: true,

            playerVars: {

                start:1

            }

        });

    });

    </script>

 

</section>


정보공유
Total 40건 1 페이지
번호 제목 글쓴이 날짜 조회
40 jquery fullcalendar eventOrder 정렬 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 3428
39 주소복사 계좌번호복사 URL복사 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 5797
38 jquery 스와이프 메뉴 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 4532
37 datepicker range select 커스터마이징 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 6518
36 URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 7139
35 설문응답 유효성 검사 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 5964
34 모두 선택 체크박스 가 한페이지에 2개이상있을경우 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-20 9914
33 복잡한 rowspan 처리 쉽게 처리하는 방법 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-22 13323
32 확장성있는 글깜빡임 처리 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-29 14960
열람중 유투브 영상 바로실행하고 영상위에 텍스트 올려서 링크 걸기. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-01 19584