jwplayer 를 이용하여 유튜브 동영상을 홈페이지 배경으로 적용 시키기?
<style type="text/css">
.jwrapbuttons {
max-width: 330px;
margin: 0 auto;
}
.jwbutton {
font-weight: bold;
font-size: 8px;
padding: 10px 30px;
border: 2px solid #FFFFFF;
color: #FFFFFF;
display: inline-block;
text-decoration: none;
margin: 50px 10px;
background: #FFFFFF(255, 0, 0, 0.3);
}
.videobgelement {
position: fixed !important;
z-index: -1;
top: 0;
left: 0;
}
</style>
<script src="https://content.jwplatform.com/libraries/yOuB4gP3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jwplayer.js"></script>
<script type="text/javascript">
$(function () {
$(document.body).wrapInner('<div class="bgvideodata"/>');
$(document.body).prepend($('<div class="videobgelement"><div id="videobgelement"></div></div>'));
//set browser video height and browser height
var ww = $(window).width();
var wh = $(window).height();
jwplayer("videobgelement").setup({
autostart: 1,
controls: 0,
width: ww,
height: wh,
//skin:'jwplayer/jwplayer-skins-free/five.xml',
'shuffle': 'true',
'repeat': 'true',
playlist: [
{file: "https://www.youtube.com/watch?v=qHm9MG9xw1o", image: "http://img.youtube.com/vi/qHm9MG9xw1o/0.jpg"},
{file: "https://www.youtube.com/watch?v=pBsQVP-Olmw", image: "http://img.youtube.com/vi/pBsQVP-Olmw/0.jpg"},
],
});
//buttons part
$('.container').prepend('<div class="jwrapbuttons"><a href="#" class="jwbutton" id="jqbuttonpause">pause</a> <a href="#" class="jwbutton" id="jwbuttonmute">mute</a></a></div>');
$('#jqbuttonpause').click(function (e) {
e.preventDefault();
//$(document).attr('title', function (i,val){ return ''; + val; });
jwplayer().pause();
});
$('#jwbuttonmute').click(function (e) {
e.preventDefault();
jwplayer().setMute();
})
});
//be responsive
$(window).resize(function () {
var ww = $(this).width();
var wh = $(this).height();
$('.videobgelement>div').width(ww + 'px');
$('.videobgelement>div').height(wh + 'px');
});
</script>
<div class="container"></div>
샘플 http://honeymusic.kr
쇼핑몰이나 홍보용으로 용의 할듯 해서 올려 봅니다.
.jwrapbuttons {
max-width: 330px;
margin: 0 auto;
}
.jwbutton {
font-weight: bold;
font-size: 8px;
padding: 10px 30px;
border: 2px solid #FFFFFF;
color: #FFFFFF;
display: inline-block;
text-decoration: none;
margin: 50px 10px;
background: #FFFFFF(255, 0, 0, 0.3);
}
.videobgelement {
position: fixed !important;
z-index: -1;
top: 0;
left: 0;
}
</style>
<script src="https://content.jwplatform.com/libraries/yOuB4gP3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jwplayer.js"></script>
<script type="text/javascript">
$(function () {
$(document.body).wrapInner('<div class="bgvideodata"/>');
$(document.body).prepend($('<div class="videobgelement"><div id="videobgelement"></div></div>'));
//set browser video height and browser height
var ww = $(window).width();
var wh = $(window).height();
jwplayer("videobgelement").setup({
autostart: 1,
controls: 0,
width: ww,
height: wh,
//skin:'jwplayer/jwplayer-skins-free/five.xml',
'shuffle': 'true',
'repeat': 'true',
playlist: [
{file: "https://www.youtube.com/watch?v=qHm9MG9xw1o", image: "http://img.youtube.com/vi/qHm9MG9xw1o/0.jpg"},
{file: "https://www.youtube.com/watch?v=pBsQVP-Olmw", image: "http://img.youtube.com/vi/pBsQVP-Olmw/0.jpg"},
],
});
//buttons part
$('.container').prepend('<div class="jwrapbuttons"><a href="#" class="jwbutton" id="jqbuttonpause">pause</a> <a href="#" class="jwbutton" id="jwbuttonmute">mute</a></a></div>');
$('#jqbuttonpause').click(function (e) {
e.preventDefault();
//$(document).attr('title', function (i,val){ return ''; + val; });
jwplayer().pause();
});
$('#jwbuttonmute').click(function (e) {
e.preventDefault();
jwplayer().setMute();
})
});
//be responsive
$(window).resize(function () {
var ww = $(this).width();
var wh = $(this).height();
$('.videobgelement>div').width(ww + 'px');
$('.videobgelement>div').height(wh + 'px');
});
</script>
<div class="container"></div>
샘플 http://honeymusic.kr
쇼핑몰이나 홍보용으로 용의 할듯 해서 올려 봅니다.
댓글 8개
8년 전
위에 링크 샘플 보시면 될듯 하네요
유튜브에 영상을 업로드 하여 홍보 할때 사용 하시면 되겠습니다...
이런거 올려도 되나....
유튜브에 영상을 업로드 하여 홍보 할때 사용 하시면 되겠습니다...
이런거 올려도 되나....
8년 전
{file: "https://www.youtube.com/watch?v=qHm9MG9xw1o", image: "http://img.youtube.com/vi/qHm9MG9xw1o/0.jpg"},
{file: "https://www.youtube.com/watch?v=pBsQVP-Olmw", image: "http://img.youtube.com/vi/pBsQVP-Olmw/0.jpg"},
추가 하시면 리스트 별로 영상이 무한데.. 나옵니다. 영 상이 끝나면 다음 영상을 보여줌
{file: "https://www.youtube.com/watch?v=pBsQVP-Olmw", image: "http://img.youtube.com/vi/pBsQVP-Olmw/0.jpg"},
추가 하시면 리스트 별로 영상이 무한데.. 나옵니다. 영 상이 끝나면 다음 영상을 보여줌
대한민국3대김수현
8년 전
좋은 팁이네요~^^ 고맙습니다
대한민국3대김수현
8년 전
오~~~ 좋네요! 감사히 스크랩+추천 합니당~~
8년 전
네에
8년 전
와, 헌이님! 멋있음요. ㅎㅎ 와아 ~~
근데요. 이것 팔아 먹어도 되나요? 흑흑
너무 가난합니다. 엉엉.
근데요. 이것 팔아 먹어도 되나요? 흑흑
너무 가난합니다. 엉엉.
8년 전
볶아 드세요
8년 전
히히 고맙습니다. 헌이님!
감사합니다!!
감사합니다!!
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2694 | 2개월 전 | 199 | ||
| 2693 | 2개월 전 | 157 | ||
| 2692 | 2개월 전 | 164 | ||
| 2691 | 2개월 전 | 179 | ||
| 2690 | 2개월 전 | 332 | ||
| 2689 | 2개월 전 | 243 | ||
| 2688 |
|
2개월 전 | 445 | |
| 2687 | 2개월 전 | 298 | ||
| 2686 |
선택과집중
|
2개월 전 | 335 | |
| 2685 | 2개월 전 | 298 | ||
| 2684 | 2개월 전 | 357 | ||
| 2683 | 3개월 전 | 488 | ||
| 2682 | 3개월 전 | 282 | ||
| 2681 | 3개월 전 | 307 | ||
| 2680 |
선택과집중
|
3개월 전 | 281 | |
| 2679 | 3개월 전 | 335 | ||
| 2678 |
|
3개월 전 | 433 | |
| 2677 |
|
3개월 전 | 506 | |
| 2676 | 3개월 전 | 332 | ||
| 2675 | 3개월 전 | 309 | ||
| 2674 |
선택과집중
|
3개월 전 | 484 | |
| 2673 |
|
3개월 전 | 325 | |
| 2672 | 3개월 전 | 342 | ||
| 2671 | 3개월 전 | 290 | ||
| 2670 | 3개월 전 | 265 | ||
| 2669 | 3개월 전 | 378 | ||
| 2668 | 3개월 전 | 294 | ||
| 2667 |
선택과집중
|
3개월 전 | 491 | |
| 2666 |
선택과집중
|
3개월 전 | 474 | |
| 2665 |
선택과집중
|
4개월 전 | 412 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기