jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인
컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다.
유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 제목이나 콘트롤 바, 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 해결해주는 것이 jquery.mb.YTPlayer입니다. 영상만 깔끔하게 보여줄 수 있게 도와줍니다.
다운로드 / CDN
jquery.mb.YTPlayer는 다운로드 또는 CDN 서비스로 사용할 수 있습니다.
- 홈페이지 : https://github.com/pupunzi/jquery.mb.YTPlayer
- CDN : https://cdnjs.com/libraries/jquery.mb.YTPlayer
예제 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>
jQuery / Method / jQuery.inArray()
jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...
jQuery / HTML 문서와 연결하는 방법, 사용하는 방법
HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...
jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드
.has() .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 $( 'h1' ).has( 'span' ) 은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!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> ...
jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드
.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드
.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 문법 1 - 속성의 값 가져오기 선택한 요소의 속성의 값을 가져온다. .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져온다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 선택한 요소에 속성을 추가한다. .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 ...
jQuery / Method / .submit() - 폼 전송 이벤트
.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다. select 선택 시 바로 폼 전송 select에서 값을 선택하면 바로 전송을 한다. 동적(다단계) 셀렉트 박스 만들 때 유용하다. <!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> ...
jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드
.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드
jQuery.trim() jQuery.trim()은 문자열에 있는 공백(whitespace)을 제거합니다. 주의할 점은 문자열 앞과 뒤에 있는 공백은 제거하지만, 문자열 중간에 있는 공백은 제거하지 않는다는 것입니다. 문법 jQuery.trim( str ) 예제 같은 문자열에 대하여, 두 번째 줄은 jQuery.trim()을 적용하였습니다. <!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> ...
jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성
개요 .length는 선택한 요소의 개수를 반환하는 속성이다. 예를 들어 다음은 div 요소의 개수를 반환한다. $( 'div' ).length 예제 1 버튼을 클릭하면 li 요소의 개수를 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ...
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"> ...