유투브 영상 바로실행하고 영상위에 텍스트 올려서 링크 걸기. > 정보공유

본문 바로가기

쇼핑몰 검색

위토즈 로그인

회원가입 회원가입  아이디/비밀번호찾기 아이디/비밀번호찾기

정보공유 목록

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

페이지 정보

작성자 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일18-08-01 15:31 조회15,833 회 댓글0 건

본문

 

 

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 jquery fullcalendar eventOrder 정렬 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 1712
39 JQUERY 주소복사 계좌번호복사 URL복사 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 4401
38 JQUERY jquery 스와이프 메뉴 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-15 3161
37 JQUERY datepicker range select 커스터마이징 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-30 4719
36 JQUERY URL 에 포함되어있는 특정 파라미터값 가져오기 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-29 5395
35 JQUERY 설문응답 유효성 검사 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 4231
34 JQUERY 모두 선택 체크박스 가 한페이지에 2개이상있을경우 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-20 7688
33 JQUERY 복잡한 rowspan 처리 쉽게 처리하는 방법 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-22 10791
32 JQUERY 확장성있는 글깜빡임 처리 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-29 12330
열람중 JQUERY 유투브 영상 바로실행하고 영상위에 텍스트 올려서 링크 걸기. 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-01 15834
30 JQUERY 메뉴 슬라이드 다운 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-01 17804
29 JQUERY 갤러리 슬라이더 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-10 14644
28 JQUERY 원하는 영역 프린트 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-08 16433
27 JQUERY jquery.validate 다중옵션 입력 체크 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-18 16128
26 JQUERY jquery 슬라이드 배너 위토즈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-27 17997
게시물 검색