[javascript] Reveal.js로 인터랙티브한 유튜브 플레이어 만들기

27 Nov 2023

javascript

Reveal.js는 웹 기반 프레젠테이션 도구로써, HTML, CSS, JavaScript를 통해 인터랙티브한 프레젠테이션을 만들 수 있습니다. 이번 블로그 포스트에서는 Reveal.js를 사용하여 유튜브 플레이어를 만드는 방법을 알아보겠습니다.

Reveal.js 설치하기

먼저, Reveal.js를 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.

npm install reveal.js

설치가 완료되면, 프로젝트 디렉토리에서 Reveal.js를 초기화합니다.

npm init reveal.js

유튜브 플레이어 추가하기

Reveal.js에 유튜브 플레이어를 추가하기 위해서는 Reveal.js의 플러그인 시스템을 사용합니다. 우선, plugin 디렉토리를 만들고, youtube.js 파일을 만들어 다음과 같이 작성합니다.

// plugin/youtube.js

function onYouTubeIframeAPIReady() {
  // YouTube API가 준비되면 실행될 함수
  Reveal.addEventListener('ready', function() {
    // 'ready' 이벤트가 발생하면 실행될 함수
    var videos = document.querySelectorAll('.youtube');
    
    Array.prototype.forEach.call(videos, function(video) {
      var iframe = document.createElement('iframe');
      iframe.src = 'https://www.youtube.com/embed/' + video.dataset.id;
      iframe.width = '640';
      iframe.height = '360';
      iframe.frameBorder = '0';
      
      video.appendChild(iframe);
    });
  });
}

다음으로, index.html 파일을 열고 다음과 같이 수정하여 youtube 클래스를 가진 div 엘리먼트를 추가합니다.

<!DOCTYPE html>
<html lang="en">

...

<section>
  <h2>유튜브 플레이어</h2>
  <div class="youtube" data-id="VIDEO_ID"></div>
</section>

...

<script src="plugin/youtube.js"></script>

...

</html>

VIDEO_ID 부분에는 재생하고자 하는 YouTube 동영상의 ID를 입력합니다.

프레젠테이션 실행하기

Reveal.js의 프레젠테이션을 실행하기 위해서는 다음 명령어를 사용합니다.

npm start

프레젠테이션은 기본적으로 localhost의 8000번 포트에서 실행됩니다. 따라서 브라우저에서 http://localhost:8000을 열어 프레젠테이션을 확인할 수 있습니다.

결론

이제, Reveal.js와 YouTube API를 활용하여 인터랙티브한 유튜브 플레이어를 만들 수 있습니다. Reveal.js의 다양한 플러그인 시스템을 활용하여 더욱 풍부한 프레젠테이션을 만들어 보세요.

참고 문서: