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

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

다운로드 / CDN

• 
  홈페이지 :
  class="extL"
  href="https://github.com/pupunzi/jquery.mb.YTPlayer"
  style="word-break: break-all"
  rel="noreferrer"
  target="_blank"
  >https://github.com/pupunzi/jquery.mb.YTPlayer >
  


• 
  CDN :
  class="extL"
  href="https://cdnjs.com/libraries/jquery.mb.YTPlayer"
  style="word-break: break-all"
  rel="noreferrer"
  target="_blank"
  >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 : 투명도를 정합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/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.9/jquery.mb.YTPlayer.min.js"></script>

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

#background {
  z-index: -1;
}

<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>

<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();
});