유튜브 YouTube 영상의 썸네일 가져오는 가장 쉬운 방법은?

웹이즈프리의 오늘의 포스팅 주제는 바로 YouTube 영상의 썸네일가져오기입니다.


아마도 대부분 유튜브 영상을 가져올 필요가 언제 있을까라는 생각을 하실 겁니다. 실제로 특별한 목적이 없는 경우 유튜브 영상을 iframe 등을 사용해 임베드하면 자동으로 해당 영상의 썸네일이 플레이전 나타나게 됩니다. 하지만 영상을 실제 로드하지 않고 이미지만 보여준다면 위와 같이 영상 썸네일 가져오는 방법이 필요할 것입니다.

@ 이미지만 가져올 때 장단점은?
실제로 유튜브 영상을 연결해서 이미지를 가져오려면 임베드 방식이 필요하고 이미지 노출까지 좀 더 불필요한 리소스가 사용될 수 있습니다. 네트워크 사용량도 늘어나겠고 성능 부분에 있어서도 단점이 있습니다. 이 경우 이미지만 노출해 보여주고 클릭 등의 유저 인터렉션의 경우에만 해당 영상을 플레이하게 한다면 여러가지 이점이 있겠네요

유튜브 영상 썸네일 가져오는 방법

위와 같은 목적을 위해 썸네일만 가져와 다른 곳에서 사용하고 싶다면 다음과 같이 VideoID만 있어도 영상을 가져올 수 있습니다. 방법은 아주 간단합니다. 아래의 주소에 VideoID 값만 바꾸면 손쉽게 얻을 수 있습니다.

https://img.youtube.com/vi/VideoID/default.jpg

위의 기본 썸네일은 크기가 품질이 떨어져 다른 이미지를 원할 수 있죠. 이 경우 아래와 같이 이미지 썸네일을 필요한 이미지퀄리티에 맞추어 사용하면 됩니다.

품질별 유튜브 썸네일 이미지 가져오는 여러가지 방법

기본 썸네일 품질부터 최대 품질 썸네일 이미지까지 선택하여 가져올 수 있습니다.

* 기본 품질의 썸네일 // 이미지 가 작을 수 있음

* 고품질 썸네일 // 높은 품질의 이미지 품질

* 중간 품질 썸네일 // 크지도 작지도 않은 썸네일로 사용하기 적절한 크기

* 표준 품질 썸네일

* 최대 품질의 썸네일 // 단, 가능하지 않을 수도 있음

여기까지 img.youtube.com의 유튜브 주소를 사용해 간단하게 이미지 썸네일 가져오는 방법을 빠르게 알아보았습니다. 추가적으로 다른 방법들도 있습니다. 예를들면 다음과 같은 방법도 있죠.

• 1. 개발자 콘솔(Developer Console)에서 API 키를 사용하여 가져오는 방법
• 2. YouTube API를 사용하는 방법

이처럼 간단한 방법 외에도 자바스크립트를 사용하거나 유튜브에서 제공하는 YouTube API를 활용하는 방법들도 존재합니다. 사용 방법은 비교적 간단한 편이지만 사용 목적에 따라 원하는 방식을 적용해 사용하면 됩니다.

! 다른 방법들 간략히 설면하면

위의 방법중 첫 번째 개발자 콘솔의 API key를 사용하는 방법은 초보자 분들에게는 조금 어려울 수 있습니다. 다음의 YouTube API 방법은 비교적 더 간단한 편으로 youtube에서 제공하는 스크립트를 사용해 new YT 등의 문법으로 사용하는 방법입니다. 장점은 이미지외에 기본적인 영상 컨트롤이나 제어 등이 가능하고 몇 가지 이벤트 메소드도 제공합니다. 다만 이미지만 필요한 경우 불필요한 과정들이 있을 수 있겠습니다.

[궁금한 점]   내 웹페이지에 사용시 CORS 등의 이슈는 없을까?
위와 같이 이미지를 가져와 내 웹사이트에 추가할 경우 CORS 이슈를 걱정하지 않으셔도 되며 <img> 태그나 background CSS를 사용해도 잘 나타나는 것을 알 수 있습니다.


마치면서 주의할 부분들은 위의 이미지 가져오기 방식등은 유튜브에서 URL 주소를 변경 등등의 상황시 해당 이미지가 나타나지 않을 수 있다는 점을 알아두어야 합니다. 이런 부분을 고려해 알아두시기 바랍니다.