유튜브 동영상을 배경으로 사용하는 방법

유튜브 동영상을 배경으로 보여주는 방법

유튜브에 있는 동영상을 배경화면으로 보여줄 수 있습니다. video 태그로 보여주는 방법과 유튜브에 동영상을 업로드하고 불러오는 방법이 있습니다. 유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 정보나 컨트롤 바, SNS 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 해결해주는 것이 jquery.mb.YTPlayer 입니다. jquery.mb.YTPlayer을 이용하면 동영상만 깔끔하게 보여줄 수 있게 도와줍니다.

다운로드 / CDN

홈페이지 : https://github.com/pupunzi/jquery.mb.YTPlayer
CDN : https://cdnjs.com/libraries/jquery.mb.YTPlayer

예제 1

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.4/css/jquery.mb.YTPlayer.min.css">
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.4/jquery.mb.YTPlayer.min.js"></script>
<div id="background" class="player" data-property="{
  videoURL: 'https://youtu.be/8ZMxLZqL73M',
  mute: true,
  showControls: false,
  useOnMobile: true,
  quality: 'highres',
  containment: 'body',
  loop: true,
  autoPlay: true,
  stopMovieOnBlur: false,
  startAt: 0,
  opacity: 1
}">
</div>

#background {
  z-index: -1;
}

jQuery( function() {
  jQuery( '#background' ).YTPlayer();
});

videoURL : 동영상의 주소입니다.
mute : 자동 재생하려면 음소거를 해야 합니다.
showControls : 재생 등 컨트롤 바를 보여줄지 정합니다.
useOnMobile : 모바일 에서도 재생할지 정합니다.
quality : 영상 품질을 정합니다.
containment : 영상이 들어갈 위치입니다. body인 경우, 웹브라우저에 꽉 차게 영상을 보여줍니다.
loop : 반복 여부를 정합니다.
autoPlay : 자동 재생 여부를 정합니다.
stopMovieOnBlur : 다른 프로그램을 활성하는 등, 포커스가 이동했을 때 재생 여부를 정합니다.
startAt : 시작 시점을 정합니다.
opacity : 투명도를 정합니다.

jquery.mb.YTPlayer의 CSS를 불러옵니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/css/jquery.mb.YTPlayer.min.css">

jQuery를 불러옵니다.

<script src="//code.jquery.com/jquery-latest.min.js"></script>

jquery.mb.YTPlayer의 스크립트 파일을 불러옵니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js"></script>

#background에 대하여 실행합니다.

jQuery( function() {
  jQuery( '#background' ).YTPlayer();
});

z-index를 낮춥니다. 화면을 터치하여 영상을 멈추게하는 것을 막을 수 있습니다.

#background {
  z-index: -1;
}

예제 2

첫번째 예제와 다른 점은 특정 요소 안에 영상을 재생합니다.
containment: 'self' - 자신의 영역 안에 영상이 나오도록 합니다.

<div id="Live" class="player" data-property="{
  videoURL: 'https://youtu.be/8ZMxLZqL73M',
  mute: true,
  showControls: false,
  useOnMobile: true,
  quality: 'highres',
  containment: 'self',
  loop: true,
  autoPlay: true,
  stopMovieOnBlur: false,
  startAt: 0,
  opacity: 1
}">
</div>

예제 3

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

<div class="text">
  <h1>HELLO</h1>
</div>

<div id="hello"class="player" data-property="{
  videoURL: 'https://youtu.be/8ZMxLZqL73M',
  mute: true,
  showControls: false,
  useOnMobile: true,
  quality: 'highres',
  containment: 'body',
  loop: true,
  autoPlay: true,
  stopMovieOnBlur: false,
  startAt: 0,
  opacity: 1
}">
</div>

#hello {
  z-index: -1;
}
.text {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  letter-spacing: 5px;
  text-align: center;
  color: #ffffff;
}

jQuery( function() {
  jQuery( '#hello' ).YTPlayer();
});

구글 블로그 만들기