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 / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 $( 'ul' ).find( 'li' ).addBack() 은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

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 / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

.toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains() :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains(text)' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 $( 'p:contains("ab")' ) ab 문자열을 포함한 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script> ...

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery의 width, innerWidth, outerWidth로 특정 요소의 가로 크기를 가져올 수 있습니다. width - padding 안쪽 크기 innerWidth - border 안쪽 크기 outerWidth - border 포함 크기 다음은 padding과 margin을 추가하면서 각 값이 어떻게 변하는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Plugin / slick / 슬라이더 플러그인

jQuery / Plugin / slick / 슬라이더 플러그인

slick은 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://kenwheeler.github.io/slick/ GitHub : https://github.com/kenwheeler/slick/ 기본 사용법 jQuery, slick.css, slick-theme.css, slick.min.js를 연결합니다. 아래는 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> 아래와 같은 형식으로 마크업합니다. 클래스 값 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-1920x1080-01.png" alt=""></div> <div><img src="images/slider-1920x1080-02.png" alt=""></div> <div><img src="images/slider-1920x1080-03.png" alt=""></div> <div><img src="images/slider-1920x1080-04.png" alt=""></div> ...

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.before() .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다. 문법 .before( content ) 예를 들어 $( 'h1' ).before( '<p>Hello</p>' ); 는 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가합니다. $( 'h1.a' ).before( $( 'p.b' ) ); 는 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 ...