유튜브 url 기반으로 정해진 규칙에 따라 매핑 해주면 해당 영상에 등록된 다양한 사이즈의 썸네일을 이미지로 따로 서버에 저장해 놓지 않아도 쉽게 가져 올 수 있음.
등록된 이미지를 가져오는 규칙
"https://img.youtube.com/vi/[유튜브 영상 ID값]/[이미지형식].jpg"
위의 유튜브 영상 URL은 "https://www.youtube.com/embed/lS9avGTDWZM" 이며
위의 [유튜브 영상 ID]값은 IS9acGTDWZM 이 된다.
그리고 [이미지형식]은 아래와 같이 지정되어있음으로 필요한 해상도에 따라 사용하면 된다.
- 120×90: default.jpg
- 320×180: mqdefault.jpg
- 480×360: hqdefault.jpg
- 640×480: sddefault.jpg
- 1920×1080: maxresdefault.jpg
반응형
'퍼블리셔 Note > HTML' 카테고리의 다른 글
| [HTML5] 모바일 친화적인 달력 UI를 제공하는 <input type="date"> (0) | 2023.10.31 |
|---|---|
| [meta] 모바일 크롬 기반 브라우저에서 url창 영역 색상 바꿔주는 <mete> (0) | 2022.04.11 |
| [HTML] 특정 요소의 범위를 표현할 때 쓰는 'meter' (0) | 2022.03.28 |
| [HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress' (0) | 2022.03.18 |
| [HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details' (0) | 2022.03.18 |