jwplayer 를 이용하여 유튜브 동영상을 홈페이지 배경으로 적용 시키기? > 그누보드5 팁자료실

그누보드5 팁자료실

jwplayer 를 이용하여 유튜브 동영상을 홈페이지 배경으로 적용 시키기? 정보

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

쇼핑몰이나 홍보용으로 용의 할듯 해서 올려 봅니다.
추천
5

댓글 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"}, 


추가 하시면 리스트 별로 영상이 무한데.. 나옵니다. 영 상이 끝나면 다음 영상을 보여줌
전체 2,429 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT