프리랜서 웹디자이너 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
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3512
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3507
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2165
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20763
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 53
225 [소스] Window.scroll() 꿘쓰 2020.06.22 60
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 94
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 169
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 321
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 518
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 613
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 587
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 578
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 684
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 672
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 875
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 621
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 664