230603 TMDB 영화 관련 영상 가져와서 유튜브 iframe 모달 만들기

230603 TMDB 영화 관련 영상 유튜브 iframe 모달 만들기

TMDB에서 영화 정보와 해당 영화의 관련 영상을 가져오고, iframe으로 모달을 띄우기

1. TMDB에서 해당 영화의 비디오 목록 가져오기
2. 유튜브에서 비디오 정보 가져오기
3. 동영상 정보에서 썸네일 정보 찾기
4. IFrame Player API로 유튜브 플레이어 띄우기

 

1. 영화 상세 페이지의 url에서  query string으로 영화 id값 가져오기

function searchParam(key) {
  return new URLSearchParams(location.search).get(key);
}
searchParam('id')

 

2. TMDB에서 해당 영화의 비디오 목록 가져오기

1. TMDB에서 Id값으로 해당 영화의 관련 비디오 목록 가져오기

https://developer.themoviedb.org/reference/movie-videos

Videos

async function fetchMovieVideos(id) {
  const res = await fetch(
    `https://api.themoviedb.org/3/movie/${id}/videos?language=ko-KR`,
    options
  );
  const { results } = await res.json();
  return results;
}

 

3. 받아온 비디오 목록의 각각 id값으로 유튜브 동영상 썸네일 가져오기

https://developers.google.com/youtube/v3/docs/videos/list?hl=ko 

Videos: list  |  YouTube Data API  |  Google for Developers

async function fetchYoutubeVideos(id) {
  const res = await fetch(
    `https://content-youtube.googleapis.com/youtube/v3/videos?id=${id}&part=id,snippet&key=${YOUTUBE_APIKEY}`
  );
  const { items } = await res.json();
  if (!items[0]) return undefined;
  return {
    id: items[0].id,
    title: items[0].snippet.title,
    url: items[0].snippet.thumbnails.standard.url,
  };
}

 

4. 동영상 플레이어 모달 창 켜고, 끄기

//iframe api 모듈 가져오기
let tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player;

function startPlayer(id) {
  if (player) {
    player.destroy();
    player = null;
  }
  player = new YT.Player("youtube_player", {
    height: "360",
    width: "640",
    videoId: id,
    events: {
    onReady: onPlayerReady,
    },
  });
  $youtube_player_container.classList.remove("hide");
}

function closePlayer() {
  $youtube_player_container.classList.add("hide");
  if (player) {
    player.destroy();
    player = null;
  }
}