YouTube Thumbnail

2010.09.18 17:52

YouTube에서 제공하는 Thumbnail 이미지 주소를 사용해 블로그나 홈페이지에 활용하는 방법에 대해 알아보도록 하겠습니다.(YouTube API 참조)
유튜브에서 제공하는 비디오 이미지는 크게 5개 입니다.

YouTube Video Demo

Thumbnail URL
http://img.youtube.com/vi/"+Video id+"/"+nr+".jpg


1. http://img.youtube.com/vi/nms_pQxjycM/1.jpg


2. http://img.youtube.com/vi/nms_pQxjycM/2.jpg


3. http://img.youtube.com/vi/nms_pQxjycM/3.jpg


4. http://img.youtube.com/vi/nms_pQxjycM/default.jpg



5. http://img.youtube.com/vi/nms_pQxjycM/0.jpg




Thumbnail에 효과를 주는 것에 대해 살펴 보면 다음과 같습니다.(YouTube API 참조)
아래 내용은 저의 개인적인 취향이므로 참고하는 정도로 활용하시면 되겠습니다.





1. Title 글자 수 조정
위의 마지막 DEMO에서 Title의 글자수가 모두 나옵니다. 줄여 주고 싶을 경우 .substr(0,40) 를 추가하여 글자 수를 통일하거나 줄여줍니다. 40을 조정하여 원하는 글자수로 조정합니다.
html.push('<br>', title.substr(0,40), '</li>');}

2. Thumbnail Animation & Hover Effects
시간대 별로 넘버링된 이미지 번호, videoID와 image border를 활용하면 애니메이션과 후버 효과를 나타낼 수 있습니다.
html.push('<img src="',thumbnailUrl,'" width="120" height="90" onmouseout="mouseOutImage(this)" 
	onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
function mousOverImage(name,id,nr){
	if(name)
		imname = name;
	imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
	imname.style.border = 	'3px solid #C2006D';
	nr++;
	if(nr > 3)
		nr = 1;
	timer =  setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);
 
}
 
function mouseOutImage(name){
 
	if(name)
		imname = name;
	
	imname.style.border = 	'3px solid #fff';
	if(timer)
		clearTimeout(timer);
 
}

3. jQuery  fadeTo Effects
 jQuery fadeTo 효과를 사용해 반투명 효과를 줄수도 있습니다.
$(document).ready(function(){
$("ul.videos li").fadeTo("slow", 0.7); 						   
$("ul.videos li").hover(function(){
$(this).fadeTo("slow", 1.0);},function(){
$(this).fadeTo("slow", 0.7); 
});
});  

신고

'YouTube' 카테고리의 다른 글

Random YouTube Player  (2) 2010.09.25
YouTube Time Machine  (0) 2010.09.25
YouTube Thumbnail  (2) 2010.09.18
Random YouTube Videos  (3) 2010.09.05
HotScripts - QUVIC  (2) 2010.08.11
TEXTTUBE 오픈 했습니다.  (14) 2010.03.25
  1. han

    정리가 잘되있네요 잘 구경하고 갑니다.

  2. 댓글 감사합니다.
    좋은 하루 되세요

티스토리 툴바