블로그에 유튜브 배경화면 적용하기

블로그에 유튜브 배경화면을 적용하는 방법에 대해 알아보겠습니다. 블로그를 운영하면서 보기 좋은 디자인과 효과적인 내용 전달이 중요합니다. 그 중에서도 동영상 배경화면은 화려하면서도 감각적인 효과를 연출할 수 있어 많은 사용자들이 선호하는 방법 중 하나입니다. 이번 글에서는 간단한 소스코드를 사용해 블로그에 유튜브 배경화면을 적용하는 방법을 소개하겠습니다.

 

 

 

예제 실행 및 결과물 확인

 

See the Pen youtube-background by imissrose (@imissrose) on CodePen.

 

 

 

소스 분석

 

위의 코드는 티스토리 블로그에 유튜브 배경화면을 적용하는 코드입니다. 코드를 하나씩 살펴보겠습니다.

 

우선 JQuery 라이브러리를 로드하는 코드입니다. JQuery는 자바스크립트 라이브러리로, 문서 객체 모델(Document Object Model, 이하 DOM)과 이벤트 처리를 쉽게 다룰 수 있도록 도와주는 라이브러리입니다.

<!-- JQuery 로드 -->
<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>

 

세번째는 JQuery의 ready() 함수를 이용해 문서가 로드된 후 실행될 함수를 등록하는 코드입니다. 이 코드는 문서 로드 후에 $('[data-vbg]').youtube_background(); 구문을 실행합니다. 이 구문은 HTML 요소 중 data-vbg 속성을 가진 요소를 선택해 youtube_background() 함수를 실행하는 코드입니다.

<script>
  $(document).ready(function() {
    $('[data-vbg]').youtube_background(); // 실행
  });
</script>

 

마지막으로는 실제로 유튜브 배경화면을 적용할 HTML 코드입니다. div 요소 안에 data-vbg-autoplay 속성과 data-vbg 속성이 있습니다. data-vbg-autoplay는 배경화면을 자동으로 재생할 것인지를 설정하는 속성이고, data-vbg는 배경화면으로 사용할 유튜브 비디오의 주소를 설정하는 속성입니다. 이 속성에는 유튜브 비디오의 URL이 들어갑니다.

<div style="position: fixed !important; width: 100vw; height: 100%; left: 0; bottom: 0;">
	<div data-vbg-autoplay="true" data-vbg="https://youtu.be/kSZddHca0ME"></div>
</div>

이 코드를 티스토리 블로그에 적용하면, 원하는 유튜브 비디오를 배경화면으로 사용할 수 있습니다. 단, 해당 비디오에 저작권 문제가 없는지 확인하고 사용해야 합니다.

 

https://github.com/stamat/youtube-background

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

 

---

참조 사이트

 

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