프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[소스] You tube 동영상 반응형 소스

2018.03.29
데모보기1

* You tube 동영상 반응형 소스
슬라이드 후 동영상 플레이 클릭, 모달팝업 동영상 정보와 동영상 실행.

* 유튜브 동영상 썸네일 이용
이번 프로젝트를 하면서 유튜브 동영상들을 링크를 걸어 이용하도록 하고 있다.
링크된 유튜브 동영상의 썸네일을 동영상의 것으로 표시하기 위해 알아보다가 아래의 페이지를 발견하여 정리해둔다.
(참고사이트에 실제 예제 이미지를 표시하고 있으니 참고 바란다)

[1] 유투브 동영상을 공유할때 제공되는 코드들은 대표적으로 아래와 같은 두가지 방식이 자주 애용된다.
공유 : https://youtu.be/nVCubhQ454c
소스코드 실행화면

공유의 URL이나 iframe의 nVCubhQ454c 부분이 바로 해당 동영상의 고유 ID값이다.

[2] 유투브 동영상은 숫자형으로 제공되는 4종류와 퀄리티를 기준으로 제공되는 5종류의 썸네일을 제공한다.
그러나 모든 동영상이 9종류의 썸네일을 제공하진 않으며, 7종류의 썸네일만은 모두 제공하며 HQ동영상의 경우만 제공하는 썸네일도 있다.

일반썸네일
- 동영상 배경 썸네일(480x360) : 0.jpg
- 동영상 시작지점 썸네일(120x90) : 1.jpg
- 동영상 중간지점 썸네일(120x90) : 2.jpg
- 동영상 끝지점 썸네일(120x90) : 3.jpg
- 고품질 썸네일(480x360) : hqdefault.jpg
- 중간품질 썸네일(320x180) : mqdefault.jpg
- 보통품질 썸네일(120x90) : default.jpg

HQ썸네일
- 표준형 썸네일(640x480) : sddefault.jpg
- 최대 해상도 썸네일(1920x1080) : maxresdefault.jpg

[3] 유투브의 썸네일 경로는 아래와 같으며 두 경로 모두 https 를 지원한다

http://img.youtube.com/vi/[동영상 ID값]/[이미지형식].jpg
http://i.ytimg.com/vi/[동영상 ID값]/[이미지형식].jpg
- 참조 http://webdir.tistory.com/472

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 2212
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 1283
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 910
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 17433
218 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 20
217 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 61
216 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 196
215 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 261
214 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 204
213 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 209
212 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
211 [소스] 별점주기 꿘쓰 2019.02.21 238
210 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 234
209 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 334
208 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 257
207 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 286
206 [소스] 반응형 상단메뉴바 소스  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.12.20 839
205 [JQUERY] jquery animation() 제이쿼리 에니메이션 꿘쓰 2018.12.20 297
204 [소스] javascript 에서 간단한 form 만들기 꿘쓰 2018.12.03 365
203 [SCRIPT] isNaN 함수 꿘쓰 2018.11.28 330
202 [기타] 프로그램 소스 링크 꿘쓰 2018.10.30 382
201 [JQUERY] jquery radio check 초기화, 값설정, 로직정리 꿘쓰 2018.10.22 479
200 [SCRIPT] 스크롤 안 움직이게 막기, 스크롤 고정 꿘쓰 2018.08.17 1235
199 [기타] 웹 소스코드 정렬해주는 사이트 꿘쓰 2018.08.16 781