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

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

 

 

 

예제 실행 및 결과물 확인

 

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

 

 

728x90

 

소스 분석

 

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

 

우선 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 - 유튜브 영상을 헤더 배경 화면으로