본문 바로가기

알려주마

[Tip]티스토리 메인화면에 유튜브 동영상 썸네일 보이기

얼마전 제가 유튜브에 올라가있는 저희 밴드 동영상을 블로그에 담으려고 하는데
이런.. 유튜브 플러그인이 있어 음~좋구나~!하고 동영상을 잘 담았습니다.

하지만! 블로그 메인으로 가보니 썸네일이 허~옇게 빈채로 썰렁~한 몇자 안되는 내용만 보이는 것이었습니다.
음..절대 티스토리가 그리 부실하지 않을게야..
약 두시간을 이래저래 살펴보았지만.. 티스토리 자체에서 해결할 수 없다는 판단을 내렸습니다.

그럼..결국 이미지를 올려야 썸네일이 보일텐데.. 유튜브내에서 동영상 썸네일은 어떻게 표시하지?
결국 유튜브 자체에서 해결할 수 있는 방법을 찾아내었지요^^

핵심은 바로 동영상 URL주소에 있었습니다.
모든 유튜브 동영상은 고유의 ID가 있고, URL에 그 ID가 링크되어지는데요, 유튜브 내의 동영상 썸네일을 살펴보니
다음과 같은 구조가 있었습니다.

http://img.youtube.com/vi/2arvPrLNtI0/1.jpg 기본1
http://img.youtube.com/vi/2arvPrLNtI0/2.jpg 기본2
http://img.youtube.com/vi/2arvPrLNtI0/3.jpg 기본3
http://img.youtube.com/vi/2arvPrLNtI0/default.jpg 기본
이상 120 X 90 사이즈
http://img.youtube.com/vi/2arvPrLNtI0/hqdefault.jpg hq고화질 썸네일 480 X 360 사이즈

위와 같이 하나의 유튜브동영상에는 여러가지 썸네일이 존재하는데요,
동영상ID는 다음과 같이 확인 합니다.


위와같이 동영상의 공유 버튼을 선택하면 아래에 주소가 표시되고, http://youtu.be/동영상고유ID
가 표시됩니다. 그럼, 동영상고유ID만 선택하여 복사를 합니다.

자, 그럼 티스토리 글쓰기에서 바로 이미지를 불러오는 방법을 알려드리도록 하지요^^
아래와 같이 글쓰기에서 사진을 선택하여 이미지입력 창을 띄웁니다.


다음, 사진추가 버튼을 선택하여 파일선택 창이 뜨면, 파일 내용은 무시하시고 아래 "파일 이름(N)"의 입력창에
다음과 같이 입력하고, 열기 버튼을 선택합니다.
http://img.youtube.com/vi/유튜브동영상고유ID/1~3.jpg, default.jpg, hqdefault.jpg
즉, 조금전 복사해 두었던 유튜브 동영상 고유 ID를 붙여넣으시면 됩니다.
샘플: http://img.youtube.com/vi/2arvPrLNtI0/hqdefault.jpg
위 샘플 주소는 제가 작사/작곡한 저희 밴드 "술드가와"라는 동영상 썸네일이니 시간 남아도시는 분은 잠시
유튜브에서 "술드가와"로 검색하셔서 감상해주시고 따뜻한 댓글 달아주시면 영광으로 생각하겠습니다!^^

자~ 그러면 다음과같이 컴퓨터에 저장되어있지 않은 그림도 URL로 끌어와서 이미지를 아주 잘~ 불러옵니다.


끝으로, 이미지가 보이면 등록 버튼을 선택합니다.
그러면 본문에 썸네일 이미지가 들어가고, 글쓰기를 저장하면 메인화면에 유튜브 동영상 썸네일이 잘~보이네요~^^

이상 저의 티스토리 입주 알려주마코너의 첫 블로그였습니다^^