[해피CGI][cgimall] 가벼운 반응형 비디오 배경 플러그인 - videoBackground

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>

샘플 파일은 demo 폴더에 index.html 파일로 제공 됩니다. 

Youtube 영상은 플레이어와 함께 제공 됩니다. 
그러다보니 깔끔하게 영상만 나오도록 하는걸 불가능 합니다. 
가장 좋은건 짧은 동영상을 준비하여 video 태그에 넣고 백그라운드로 사용하시길 추천 드립니다.