🎨 Youtube-Background - 유튜브 영상을 헤더 배경 화면으로

youtube-background

홈페이지의 배경화면으로 유튜브 영상을 간단하면서도 깔끔하게 구현할수 있는 라이브러리를 소개해 본다.

적용 예시는 다음과 같다.

 

---

youtube-background 사용법

GitHub - stamat/youtube-background: Simple script for embedding YouTube, Vimeo and HTML5 videos as cover background

<!-- 제이쿼리 로드 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- youtube-background 라이브러리 로드 -->
<script src="https://unpkg.com/youtube-background@1.0.14/jquery.youtube-background.min.js"></script>
<script>
  $(document).ready(function() {
    $('[data-vbg]').youtube_background(); // 실행
  });
</script>

<div style="position: fixed !important; width: 100vw; height: 100%; left: 0; bottom: 0;">
	<div data-vbg-autoplay="true" data-vbg="유튜브 링크"></div>
</div>

 

만일 제이쿼리를 쓰지 않는다면, 클래스 생성자로 사용도 가능하다.

new VideoBackgrounds('[data-vbg]');

 

data-vbg 옵션

<!-- 이런식으로 태그안에다 data-vbg-옵션명 으로 적으면 된다 -->
<div data-vbg-autoplay="true" data-vbg="유튜브 링크"></div>

Property	Default	Accepts	Description
play-button	false	boolean	토글 일시 중지 버튼
mute-button	false	boolean	토글 음소거 버튼 추가
autoplay	true	boolean	비디오 자동 재생
muted	true	boolean	동영상 음소거
loop	true	boolean	동영상 루프 재생
mobile	false	boolean	모바일에서 유튜브 퍼가기 유지
fit-box	false	boolean	컨테이너에 맞게 iframe 설정
inline-styles	true	boolean	iframe 및 래퍼에서 기본 인라인 스타일을 활성화/비활성화
load-background	true	boolean	YouTube에서 배경 가져오기
poster	null	string	자신의 배경 제공
offset	200	int	이 설정은 정보 요소를 숨기기 위해 표시 영역보다 비디오를 약간 크게 만듭니다.
resolution	16:9	string	비디오 해상도 선언(진행 중인 작업)
start-at	0	int	비디오는 초 단위로 원하는 시간에 재생을 시작합니다.
end-at	0	int	시간(초)에 동영상 재생이 종료됩니다. 0은 끝까지 재생됨을 의미합니다.