사용자가 직접 유튜브 주소 ID를 입력받아 썸네일을 가져오는 방법과 유튜브 주소 ID값과 썸네일 주소를 어떻게 가져오는지 상세히 안내한다.
또한, 유튜브 썸네일 주소 파일명에 따른 다양한 썸네일 크기와 화질을 확인할 수 있게 안내한다.
✨시작하며
게시판 작업 중, 유튜브와 관련된 기능이 추가로 필요해졌다.
원래는 게시글 내용에 첫 번째로 첨부된 유튜브 값을 바탕으로 썸네일을 가져오려고 했으나, 사용자가 직접 본문에 유튜브 영상을 임베드하지 않아도 되는 것과 로직을 간결하게 만들기 위해 사용자로부터 유튜브 주소 ID값을 직접 입력받기로 했다.
기본 로직
게시글 작성 폼에서 유튜브 썸네일 사용여부를 라디오 버튼을 통해 선택한다.
default로 미사용이 선택되어 있으며, 미사용이 사용된 경우 ID값을 입력하는 input은 disabled 처리가 되며 사용을 선택한 경우에는 disabled가 false로 전환된다.
주소 ID를 input할 때 jQuery로 해당 input란에 on 메서드를 바인딩해두어 ID값을 정규식과 일치하도록 replace 시켜준다.
영숫자, 특수문자를 제외한 값은 입력할 수 없어 값이 잘못 들어갈 경우를 방지해준다.
또, 유튜브 주소 ID는 11자리로 구성되어 있어 input의 maxlength 또한 11로 설정해 주었다.
영상 주소 ID값은 어떻게 가져오지?
보통 유튜브 URL에서 ID값은 아래처럼 되어있다.
- https://www.youtube.com/watch?v=`ID값`
- https://youtu.be/`ID값`
11자의 문자가 /이후에 존재한다면 ID값이라고 봐도 무방할 것 같다.
썸네일 주소는 어떻게 불러올까?
썸네일 주소에 ID값을 넣어주면 썸네일이 불러와진다.
기본적으로 썸네일 주소 형식은 https://img.youtube.com/vi/이며 뒤에 ID값과 원하는 형식의 파일명을 입력해 주면 된다.
직접 ID값 및 썸네일 가져오기
영상 주소 ID값
즐겨 듣는 플레이리스트를 예시로 들어보겠다.
해당 영상의 주소는 https://www.youtube.com/watch?v=PrqwxkBB0DA&pp=ygUJZXNzZW50aWFs로, 여기서 영상 주소 ID값은 watch?v= 뒤의 11글자이다.
다른 형태의 주소로는 https://youtu.be/PrqwxkBB0DA도 있다.
여기선 바로 youtu.be 뒤의 11자가 ID값이다.
따라서 ID값은 PrqwxkBB0DA이다.
썸네일
썸네일은 위 썸네일 주소 형식 뒤에 ID값을 붙여주면 된다.
https://img.youtube.com/vi/ + PrqwxkBB0DA로, 여기서 파일명으로 썸네일의 사이즈와 화질을 조절할 수 있다.
여기선 가장 기본적인 0을 사용해서 https://img.youtube.com/vi/PrqwxkBB0DA로 예시를 들겠다.
해당 주소를 브라우저의 주소표시줄에 입력하면 썸네일이 보이며, 이미지를 불러오려면 img 태그의 src에 해당 주소를 설정해 주면 된다.
썸네일 주소 파일명 종류
- 120×90
- 320×180
- 480×360
- 640×480(HQ)
- 1280×720, 1920×1080(HQ)
📜참고
'Programming > HTML, CSS, JS' 카테고리의 다른 글
| jQuery로 선택한 테이블 행 강조하기 (2) | 2023.11.11 |
|---|---|
| 인터넷 익스플로러 사용자를 엣지 브라우저로 이동시켜야 하는 이유 (0) | 2023.11.10 |