Youtube 썸네일 이미지 가져오는 방법

유튜브의 영상 아이디값을 알면 해당 영상의 썸네일 이미지도 알 수 있다.

기본적으로 썸네일 이미지의 URL은 다음과 같다. 여기에서 {영상아이디값}과 {크기별썸네일}을 알맞게 변경해주면 된다.

https://img.youtube.com/vi/영상아이디값/크기별썸네일.jpg

 

썸네일 종류 및 URL

구분	이미지 크기	URL
기본	120 x 90	https://img.youtube.com/vi/영상아이디/default.jpg
중품질	320 x 180	https://img.youtube.com/vi/영상아이디/mqdefault.jpg
고품질	480 x 360	https://img.youtube.com/vi/영상아이디/hqdefault.jpg
중간해상도	640 x 480	https://img.youtube.com/vi/영상아이디/sddefault.jpg
최대해상도	1280 x 720	https://img.youtube.com/vi/영상아이디/maxresdefault.jpg

 

예시

여기 유튜브 영상 하나가 있다. (출처 : 유튜브 채널 essential;)

https://www.youtube.com/watch?v=MLb0sY8ZJf4

여기에서 영상 아이디는 MLb0sY8ZJf4 이다. 이 영상아이디를 각 URL에 넣으면 된다.

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

https://img.youtube.com/vi/MLb0sY8ZJf4/mqdefault.jpg

https://img.youtube.com/vi/MLb0sY8ZJf4/hqdefault.jpg

https://img.youtube.com/vi/MLb0sY8ZJf4/sddefault.jpg

https://img.youtube.com/vi/MLb0sY8ZJf4/maxresdefault.jpg

 

HTML 코드에 img 태그에 삽입 하면

<img src="https://img.youtube.com/vi/MLb0sY8ZJf4/default.jpg" alt="대체텍스트">

또는 CSS로 선언을 해주면 이렇게 된다.

.thumbnail {background:url('https://img.youtube.com/vi/MLb0sY8ZJf4/default.jpg') no-repeat 0 0/cover}