- 정보공유
[JQUERY] 유투브 영상 바로실행하고 영상위에 텍스트 올려서 링크 걸기.
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>