가벼운 반응형 비디오 배경 플러그인

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 동영상 > 가벼운 반응형 비디오 배경 플러그인 - videoBackground 상세정보

클라우드태그

javascript

PHP

CSS

HTML

asp

API

jquery

mysql

image

mobile

slide

게시판

메뉴

현재접속자 명

가벼운 반응형 비디오 배경 플러그인 - videoBackground

해피팀

네티즌

소스분류

동영상

다운로드 횟수

1 회

간단설명

jQuery를 위한 가볍고 반응성이 뛰어난 비디오 배경 플러그인으로, HTML5나 Youtube 비디오를 특정 컨테이너의 배경으로 사용할 수 있습니다.

평가하기

videoBackground 는 가볍고 반응성이 뛰어난 비디오 배경 플러그인으로,
HTML5나 Youtube 비디오를 특정 컨테이너의 배경으로 사용할 수 있습니다.
정말 가볍게 사용할 수 있어서 장점입니다.

# 사용방법

1. jQuery 라이브러리(슬림 빌드)와 jQuery videoBackground 플러그인을 html 파일에 가져옵니다.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="build/videoBackground.js"></script>

2. HTML5 비디오를 문서에 포함합니다.

<div class="example">
    <video src="video.mp4" autoplay muted></video>
</div>

3. HTML5 비디오를 컨테이너 'example'의 반응형 배경으로 작동하도록 함수를 호출합니다.

<script>
$('.example').videoBackground();
</script>

4. 배경 비디오의 종횡비를 지정할 수도 있습니다. 기본값: 16:9.

<script>
$('.example').videoBackground({
    ratio_x: 16,
    ratio_y: 9
});
</script>

5. Youtube 비디오를 사용하려면 다음 단계를 따르세요.

<div class="example">
    <div class="youtube-video" data-yt-id="VIDEO ID HERE"></div>
</div>

<script>
//init youtube
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytPlayers = [];

onYouTubePlayerAPIReady = function () {
    var players = document.querySelectorAll('.youtube-video');

    for (var i = 0; i < players.length; i++) {
        var player = new YT.Player(players[i], {
            playerVars: {
                'autoplay': 1,
                'loop': 1,
                'rel': 0,
                'showinfo': 0,
                'controls': 0,
                'modestbranding': 1,
                'playlist': players[i].getAttribute("data-yt-id")

            },
            videoId: players[i].getAttribute("data-yt-id"),
            events: {
                'onReady': onPlayerReady
            }
        });
        ytPlayers.push(player);
    }
};

function onPlayerReady(event) {
    event.target.mute();
    //init videoBackground for youtube video
    $('.example').videoBackground();
}    
</script>