[javascript] YouTube API와 jQuery를 이용한 동영상 재생 방법

01 Dec 2023

javascript

이 글에서는 YouTube API와 jQuery를 사용하여 웹 페이지에서 동영상을 재생하는 방법에 대해 알아보겠습니다.

YouTube API 키 발급하기

먼저, YouTube API를 사용하기 위해 API 키를 발급해야 합니다. 다음은 YouTube API 키를 발급하는 단계입니다.

Google API 콘솔에 접속합니다.
새 프로젝트를 생성하고, “YouTube Data API v3”를 활성화합니다.
왼쪽 메뉴에서 “사용자 인증 정보”를 선택합니다.
“API 키”를 클릭하여 새 API 키를 생성합니다.

API 키를 발급했다면, 이제 웹 페이지에서 YouTube 동영상을 재생할 준비가 되었습니다.

jQuery를 이용한 동영상 재생

먼저, HTML 파일에 다음과 같이 필요한 스크립트와 스타일을 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>YouTube 동영상 재생</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #player {
      width: 640px;
      height: 360px;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  <button id="playButton">재생</button>
</body>
</html>

다음으로, JavaScript 코드를 추가하여 YouTube 동영상을 재생하는 기능을 구현합니다.

$(document).ready(function() {
  // YouTube API 스크립트 로드
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // API 스크립트 로드 후 실행할 함수
  window.onYouTubeIframeAPIReady = function() {
    // iframe 플레이어 생성
    var player;
    var playButton = document.getElementById('playButton');
    playButton.addEventListener('click', function() {
      player = new YT.Player('player', {
        videoId: 'VIDEO_ID',
        width: 640,
        height: 360,
        events: {
          'onReady': onPlayerReady
        }
      });
    });

    // 플레이어가 준비되면 실행할 함수
    function onPlayerReady(event) {
      event.target.playVideo();
    }
  };
});

위 코드에서 VIDEO_ID를 실제 재생하려는 YouTube 동영상의 ID로 변경해야 합니다.

이제 브라우저에서 HTML 파일을 열어 동영상 재생 버튼을 클릭하면 YouTube 동영상이 재생됩니다.

마무리

이번 글에서는 YouTube API와 jQuery를 이용해 웹 페이지에서 동영상을 재생하는 방법에 대해 알아보았습니다. YouTube API 키를 발급하고, jQuery를 이용하여 동영상 재생을 구현하는 과정을 소개했습니다.