[Youtube API] 유튜브 API 사용하기 / IFrame / API 할당량 초과

OPEN WEATHER를 이용해 날씨 API 불러오기에 이어서 이번엔 유튜브 API 불러오기 도전!

저번에 진행한 프로젝트에서 전기차 관련 영상을 볼 수 있는 페이지를 만들기 위하여 유튜브 API를 사용해 보았다.

내가 구현한 기능은 API를 사용하여 영상을 불러오고 지정된 키워드를 선택하면 해당 키워드와 관련된 영상이 나오는 것이였다.

솔직히 API를 받아와서 영상받아오는건 쉬웠는데 영상 보는 페이지 꾸미는게 더 어려웠다...?

어쨌든 API 불러오는 방법 포스팅 시작!

 

유튜브 API 받아오기

1. Google Cloud 접속하기

https://console.cloud.google.com/welcome?project=youtube2-402602

Google 클라우드 플랫폼

 

2. API 및 서비스 > 프로젝트 선택 > 새 프로젝트 생성

 

 

3. 프로젝트 생성 후 검색 창에 YouTube Data API v3 검색 > API 사용 선택

 

4. API 키 생성하기

사용자 인증 정보 만들기 > API 키를 선택하면 키가 발급된다.

나중에 영상을 불러올 주소를 받으면 해당 주소에 발급받은 키를 넣으면 된다.

 

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

사용 설정된  API 및 서비스 > YouTube Data API v3 > API 탐색기에서 사용해 보기

6. 카테고리에서 동영상 > list 선택 후 우측에 사용해 보기 

 

7. API 통신 테스트

요청 파라미터에 값을 입력 후 EXECUTE 선택

• part : snippet으로 설정하는 경우 영상의 제목, 설명 등을 식별하는 다른 속성을 포함하여 불러온다.
• chart : mostPopular로 설정할 경우 가장 인기있는 동영상을 불러온다.
• maxResults : 불러올 영상의 최대 갯수를 설정한다.
• regionCode : 지정된 지역에서 동영상을 선택한다.

 

아래와 같이 데이터가 잘 불러와 지는 걸 볼 수 있다.

 

나중에 자신이 원하는 곳에 영상을 불러오고 싶다면 아래의 주소에서 [YOUR_API_KEY]에 자신이 발급받은 API키를 넣어 입력하면 된다. 위에서 본 데이터와 동일한 정보의 데이터가 JSON 형태로 나온다.

※ 아래의 주소는 이전에 변수를 입력한 창에서 HTTP를 선택하면 GET 방식의 동일한 주소가 나온다.

https://youtube.googleapis.com/youtube/v3/videos?part=snippet%20&chart=mostPopular&maxResults=10&regionCode=kr&key=[YOUR_API_KEY]

---

Iframe 사용하여 영상 불러오기

1. IFrame Player API 접속 > 플레이어 매개변수 표시

https://developers.google.com/youtube/youtube_player_demo?hl=ko

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

 

2. IFrame 삽입 코드 html에 입력

[영상 ID]로 된 곳에 JSON으로 받아본 데이터에서 볼 수 있었던 영상의 ID를 입력하면 해당 영상이 화면에 뜨게 된다.

<iframe id="ytplayer" type="text/html" width="720" height="540" src="https://www.youtube.com/embed/[영상 ID]"
frameborder="0" allowfullscreen>

 

※ 아래 영상은 위와 같은 방법을 사용해 해당 글 HTML에 적용하여 영상을 불러오고 있는 것이다.

 

---

Youtube API 할당량 초과 에러

 영상을 계속 새로 불러오다보면 갑자기 영상이 안불러와 지는 상황이 생길 수 있는데 이는 유튜브 API 일일 할당량 한도를 초과한 것이다. 검색해보니 이럴 때에는 할당량 한도 연장 신청을 해야 하는데 시간이 좀 걸린다고 한다. 나같은 경우는 프로젝트를 진행하면서 바로 영상이 불러와 지는지 계속 확인해야했기 때문에 프로젝트를 아예 새로 생성해서 새로운 API를 받아오는 방법을 선택했다.

애드센스도 지금 몇주 째 승인안해주는데 연장 승인은 또 언제 해주겠어...?

---

 

📍Open Weather에서 날씨 API 받아오는 방법

https://mzero.tistory.com/18

Open Weather로 날씨 API 불러오기