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

정보공유

[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 49건 1 페이지
번호 제목 글쓴이 날짜 조회
49 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 815
48 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 779
47 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 903
46 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 1832
45 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 1899
44 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 2022
43 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 1993
42 폼을 생성하고 선택된(필요한) 영역의 값만 전송 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-17 2521
41 탭으로 나눠지는 슬라이드 쇼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 3286
40 jquery fullcalendar eventOrder 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 11107
39 주소복사 계좌번호복사 URL복사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 10738
38 jquery 스와이프 메뉴 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 10971
37 datepicker range select 커스터마이징 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 14765
36 URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 13178
35 설문응답 유효성 검사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 11627