jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다.

유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 해결해주는 것이 jquery.mb.YTPlayer입니다. 영상만 깔끔하게 보여줄 수 있게 도와줍니다.

다운로드 / CDN

jquery.mb.YTPlayer는 다운로드 또는 CDN 서비스로 사용할 수 있습니다.

예제 1

다음 영상을 배경으로 넣어보겠습니다.

전체 코드는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>YTPlayer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/css/jquery.mb.YTPlayer.min.css">
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script>
    <script>
      jQuery( function() {
        jQuery( '#background' ).YTPlayer();
      } );
    </script>
  </head>
  <body>
    <div id="background" class="player" data-property="{
      videoURL:'https://youtu.be/KKjuRJh_3LY',
      mute: true,
      showControls: false,
      useOnMobile: true,
      quality: 'highres',
      containment: 'body',
      loop: true,
      autoPlay: true,
      stopMovieOnBlur: false,
      startAt: 0,
      opacity: 1
    }"></div>
  </body>
</html>

웹브라우저를 꽉 채워서 영상을 재생합니다.

하나씩 분석해보면...

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/css/jquery.mb.YTPlayer.min.css">
  • jquery.mb.YTPlayer의 CSS를 불러옵니다.
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  • jQuery를 불러옵니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script>
  • jquery.mb.YTPlayer의 스크립트 파일을 불러옵니다.
<script>
  jQuery( function() {
    jQuery( '#background' ).YTPlayer();
  } );
</script>
  • #background에 대하여 실행합니다.
<div id="background" class="player" data-property="{
  videoURL:'https://youtu.be/KKjuRJh_3LY',
  mute: true,
  showControls: false,
  useOnMobile: true,
  quality: 'highres',
  containment: 'body',
  loop: true,
  autoPlay: true,
  stopMovieOnBlur: false,
  startAt: 0,
  opacity: 1
}"></div>
  • #background를 정의합니다. 상세한 설정은 여기서 확인할 수 있습니다.
  • videoURL : 영상의 주소입니다.
  • mute : 자동 실행하려면 소리를 없애야 합니다.
  • showControls : 재생 등 콘트롤 바를 보여줄지 정합니다.
  • useOnMobile: : 모바일 기기에서도 재생할지 정합니다.
  • quality : 영상 품질을 정합니다.
  • containment: 영상이 들어갈 위치입니다. body인 경우, 웹브라우저에 꽉 차게 영상을 보여줍니다.
  • loop : 반복 여부를 정합니다.
  • autoPlay : 자동 재생 여부를 정합니다.
  • stopMovieOnBlur : 다른 프로그램을 활성하는 등, 포커스가 이동했을 때 재생 여부를 정합니다.
  • startAt : 시작 시점을 정합니다.
  • opacity : 불투명도를 정합니다.

예제 2

특정 요소 안에 영상을 넣는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>YTPlayer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/css/jquery.mb.YTPlayer.min.css">
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script>
    <script>
      jQuery( function() {
        jQuery( '#background' ).YTPlayer();
      } );
    </script>
    <style>
      #background { z-index: -1; }
    </style>
  </head>
  <body>
    <div id="background" class="player" data-property="{
      videoURL:'https://youtu.be/KKjuRJh_3LY',
      mute: true,
      showControls: false,
      useOnMobile: true,
      quality: 'highres',
      containment: 'self',
      loop: true,
      autoPlay: true,
      stopMovieOnBlur: false,
      startAt: 0,
      opacity: 1
    }"></div>
  </body>
</html>

첫번째 예제와 다른 점은...

<style>
  #background { z-index: -1; }
</style>
  • z-index를 낮춥니다. 그래야 마우스로 클릭하여 영상을 멈추게하는 것을 막을 수 있습니다.
containment: 'self',
  • 자신의 영역 안에 영상이 나오도록 합니다.

예제 3

다음은 동영상 위에 텍스트를 추가한 간단한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>YTPlayer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/css/jquery.mb.YTPlayer.min.css">
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script>
    <script>
      jQuery( function() {
        jQuery( '#background' ).YTPlayer();
      } );
    </script>
    <style>
      body { margin: 0px; }
      .jb-box { position: relative; }
      #background { z-index: -1; }
      .jb-text { position: absolute; top: 50%; left: 50%; width: 400px; margin-left: -200px; text-align: center; color: #ffffff; }
    </style>
  </head>
  <body>
    <div class="jb-box">
      <div id="background" class="player" data-property="{
        videoURL:'https://youtu.be/KKjuRJh_3LY',
        mute: true,
        showControls: false,
        useOnMobile: true,
        quality: 'highres',
        containment: 'self',
        loop: true,
        autoPlay: true,
        stopMovieOnBlur: false,
        startAt: 0,
        opacity: 1
      }"></div>
      <div class="jb-text">
        <h1>Lorem Ipsum Dolor</h1>
      </div>
    </div>
  </body>
</html>

Related Posts

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

:nth-child() :nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다. 문법 $( ':nth-child(an+b)' ) a와 b는 상수, n은 변수입니다. n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다. an+b 대신에 even, odd를 사용할 수 있습니다. 예제 $( 'ol li:nth-child(2)' ) ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드

jQuery / Method / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드

.each() .each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행시킵니다. 문법 .each( function ) 특정 조건을 만족할 때 반복 작업에서 빠져려면 return false 를 사용합니다. 예제 1 p 요소에 각각 다른 클래스를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .s1 ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

:empty :empty는 내용이 없는 빈 요소를 선택하는 선택자입니다. 문법 $( ':empty' ) 예를 들어 $( 'div:empty' ) 는 div 요소 중 내용이 없는 것을 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> table { ...

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

.get() .get()은 선택한 요소를 배열(Array)로 가져옵니다. 문법 .get() 선택한 모든 요소를 가져옵니다. .get( index ) 선택한 요소 중 특정한 것만 가져옵니다. 예제 1 모든 li 요소를 jb 배열로 가져온 후, 각 요소의 내용을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...

jQuery / Method / .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드

jQuery / Method / .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드

.prepend() .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).prepend( '123 ' ); 라고 하면 <p>123 Lorem Ipsum Dolor</p> 으로 출력됩니다. 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .load()

jQuery / Method / .load()

.load() .load()는 다른 문서 등에서 내용을 가져와 현재 문서에 나타냅니다. 문법 .load( url ) 예를 들어 a.html의 p 요소를 가져와 div 요소 안에 넣으려면 다음과 같이 합니다. $( 'div' ).load( 'a.html p' ); 예제 load-02.html에서 id 값이 ab인 요소를 가져와서, 현재 문서의 id 값이 xy인 요소 안에 넣습니다. load-01.html <!doctype html> <html lang="ko"> ...

jQuery / .ajax() / 동기식으로 사용하는 방법

jQuery / .ajax() / 동기식으로 사용하는 방법

Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...

jQuery 강좌