프리랜서 웹디자이너 웹퍼블리셔RELATION

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

이 포스트 공유하기

전체목록