[YouTube API] 유튜브 API 동영상 데이터 가져오는 방법

유튜브 영상을 가져오기 위해서는 유튜브 API를 사용해야 한다.

 

 

 

1. Google Cloud Platform 프로젝트 등록

Google 클라우드 플랫폼

 

1-1) 프로젝트 생성

프로젝트 생성

 

프로젝트 이름 등록

 

1-2) YouTube Data API v3 사용 

검색 > YouTube Data API v3 클릭 > 사용 클릭 

YouTube Data API v3

API 사용

 

 

1-3) API Key 생성

사용자 인증 정보 > 사용자 인증 정보 만들기 > API 키

 

 

 

1-4) API Key 제한 설정 (선택)

무단 사용 방지를 위해 Key 수정

API 키 수정

 

키 제한

• 키제한 > YouTube Data API v3 선택

 

 

 

---

2. YouTube API 통해 동영상 리스트 가져오기

Videos: list  |  YouTube Data API  |  Google Developers

 

 

2-1) 직접 사용해 보기 클릭

 

 

2-2) API 통신 테스트

해당 옵션들을 설정 후 EXECUTE 버튼을 클릭하면 응답 값을 확인할 수 있다.

API 테스트

 

매개변수
part = snippet	snippet을 설정하는 경우 API 응답은 하위 속성도 모두 포함
chart = mostPopular	mostPopular(가장 인기있는 동영상)
maxResults = 25	최대 항목 수를 지정
regionCode = kr	API가 지정된 지역에서 동영상 선택

 

- 테스트 URL  
https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&regionCode=kr&key=받은키복사 

응답 값

• 응답값 id는 동영상을 불러올 때 사용된다.

 

 

---

3. YouTube iframe을 통한 도영상 재생 방법

YouTube 플레이어 데모  |  YouTube IFrame Player API  |  Google Developers

 

youtube iframe

 

<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
frameborder="0" allowfullscreen>

• 해당 코드를 HTML에 적용하면 해당 동영상이 재생된다.
• src옵션의 마지막 리소스가 동영상 Id이다.

 

3-1) 사용방법

const iframeProps = {
  id: "ytplayer",
  type: "text/html",
  width: "720",
  height: "405",
  src: "https://www.youtube.com/embed/cgdne04i99I",
  frameborder: "0",
  allowfullscreen: "allowfullscreen",
};
export default function Main() {
  return (
    <div>
      <iframe {...iframeProps}></iframe>
    </div>
  );
}

 

 

3-2) 동영상을 직접 제어하는 방법

2023.01.17 - [React] - [YouTube IFrame API] React에서 유튜브 동영상 출력 방법

 

 

 

 

---

4. 동영상 검색 데이터 가져오기

이외 옵션은 해당 사이트를 참고한다.

Search: list  |  YouTube Data API  |  Google Developers

 

매개변수
type	리소스 유형 검색(video,channel,playlist)
q	검색할 검색어를 지정합니다.

https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=react&type=video&key=키