AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
D

[유트브]동영상 사이트 만들기

플레이디원
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2011-08-11 (목) 22:53:25 · 3459 · 3

링크

http://121.156.58.206/inc/jin/jin/youtube.php (200)
미리보기 : http://121.156.58.206/inc/jin/jin/youtube.php
아티스트를 클릭하세요

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="youtube search api">
<meta name="keywords" content="jquery & youtube api">
<meta name="author" content="[email protected]">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<title>Youtube Search</title>
<script type="text/javascript">
<!--
function search_youtube(query,image){
var results = 24;//검색결과
$("#result").html('');
var keyword= encodeURIComponent(query);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results='+results+'&v=2&alt=jsonc';
$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{
if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
var video_image=data.thumbnail.sqDefault;
var video_description=data.description;
if (image)
{
var video_frame="<img src='"+ video_image+"'>";
}else{
var video_frame="<iframe width='193' height='160' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' ype='text/html'></iframe>";
}
var final='<li style="float:left;padding-right:10px;height:400px;"><a href="#">'+video_frame+'<br /><dl style="margin-top:10px;width:173px;"><dt>'+video_title+'('+video_viewCount+')</dt><dd>'+video_description+'</dd></dl></a></li>';


$("#result").append(final);
});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
}
//-->
</script>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
line-height:normal;
}
body {font-size:.75em; font-family:"굴림",gulim, "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;}
a:link {color:#666; text-decoration:none;}
a:visited {color:#666; text-decoration:none;}
a:hover {color:#000; text-decoration:underline;}
a:active {color:#666; text-decoration:none;}
#container{width:980px; margin:0 auto;border:#cccccc 1px solid;}
#main_contents_area{padding:10px;}
.floatL {float:left !important;}
.floatR {float:right !important;border-left:#cccccc 1px solid;}
.artist_list{padding:10px;width:200px;}
.artist_list li{list-style:none;border-bottom:#cccccc 1px solid;padding:5px;}
.video_list{padding:10px;}
/* Live B */
.video_list ul {width:710px; padding-left:2px; overflow:hidden; *zoom:1;}
.video_list ul li {float:left; width:195px; height:213px; margin:5px 9px; overflow:hidden;}
.video_list ul li a {display:block;}
.video_list ul li img {width:193px; height:123px; margin-bottom:3px; border:1px solid #ccc;}
.video_list ul dt {width:193px;font-size:14px; color:#333; font-weight:bold; height:37px; line-height:120%; overflow:hidden;}
.video_list ul dd {width:193px;font-size:12px; line-height:130%; color:#777;}

</style>
</head>


<body>
<br />
<!-- Container -->
<div id="container">
<!-- Contents -->
<div id="main_contents_area" class="floatL">
<ul style="width:720px; padding-left:2px; overflow:hidden; *zoom:1;" id="result"></ul>
</div>
<!-- Aside -->
<div id="main_side_area" class="floatR">
<ul class="artist_list">
<li onclick="search_youtube('바이브')">바이브</li>
<li onclick="search_youtube('김광석')" >김광석</li>
<li onclick="search_youtube('이문세')">이문세</li>
<li onclick="search_youtube('이승철')">이승철</li>
<li onclick="search_youtube('2ne1')">2ne1</li>
<li onclick="search_youtube('박정현')">박정현</li>
<li onclick="search_youtube('장혜진')">장혜진</li>
<li onclick="search_youtube('옛사랑')">옛사랑</li>
</ul>
</div>
</div>


</body>

</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
#퍼블리셔팁 #퍼블리셔 #팁자료실 #html

첨부파일

youtube.html (4.4 KB) 74회 2011-08-11 22:56
|

댓글 3개

범범범
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-08-16 (화) 14:09:07
감사합니다.
범범범
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-08-16 (화) 14:11:11
잘 사용하겠습니다.
웹웹프로
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-08-22 (월) 06:34:50
감사합니다. 참고하겠습니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
11-09-08 조회 2,721
11-09-05 조회 2,592
11-09-02 조회 3,442
11-09-01 조회 2,518
11-09-01 조회 2,708
11-09-01 조회 3,983
11-08-31 조회 2,727
11-08-28 조회 2,455
11-08-26 조회 2,364
11-08-19 조회 2,594
11-08-19 조회 2,515
11-08-17 조회 2,623
11-08-17 조회 2,677
11-08-13 조회 2,484
11-08-11 조회 3,460
11-08-11 조회 2,683
11-08-08 조회 2,928
11-08-06 조회 2,669
11-08-06 조회 2,787
11-08-05 조회 2,990
11-08-05 조회 2,405
11-08-04 조회 2,855
11-08-02 조회 2,348
11-07-22 조회 3,921
11-07-21 조회 2,246
11-07-13 조회 2,618
11-07-08 조회 2,925
11-07-05 조회 2,065
11-06-28 조회 3,002
11-06-22 조회 2,511
11-06-22 조회 2,191
11-06-13 조회 2,289
11-06-07 조회 4,109
11-06-04 조회 2,914
11-05-19 조회 3,190
11-05-06 조회 2,935
11-04-20 조회 2,364
11-04-19 조회 2,502
11-04-05 조회 3,054
11-04-04 조회 2,968
11-04-03 조회 2,685
11-04-02 조회 2,803
11-04-01 조회 2,310
11-04-01 조회 2,460
11-04-01 조회 3,055
11-03-25 조회 2,528
11-03-18 조회 2,225
11-03-17 조회 3,166
11-03-10 조회 2,309
11-03-10 조회 2,308
11-03-10 조회 2,561
11-03-07 조회 3,726
11-03-05 조회 2,414
11-03-05 조회 4,898
11-03-02 조회 2,511
11-03-01 조회 2,471
11-02-24 조회 2,542
11-02-24 조회 2,370
11-01-17 조회 5,098
11-01-14 조회 3,052
11-01-07 조회 3,051
10-12-29 조회 2,390
10-12-28 조회 2,606
10-12-24 조회 2,339
10-12-09 조회 2,424
10-12-09 조회 3,628
10-12-08 조회 3,605
10-12-08 조회 3,007
10-12-08 조회 2,846
10-12-08 조회 3,242
10-11-30 조회 2,610
10-11-25 조회 2,475
10-11-15 조회 2,237
10-11-14 조회 4,207
10-10-28 조회 2,890
10-10-26 조회 3,190
10-10-13 조회 2,468
10-10-12 조회 2,689
10-10-09 조회 2,274
10-10-05 조회 3,291
10-09-30 조회 2,953
10-09-26 조회 4,072
10-09-24 조회 2,816
10-09-20 조회 2,655
10-09-20 조회 3,025
10-09-18 조회 2,397
10-09-18 조회 2,438
10-09-17 조회 4,223
10-09-15 조회 3,217
10-09-15 조회 2,707
10-09-15 조회 2,561
10-09-15 조회 2,381
10-09-11 조회 2,539
10-09-11 조회 2,703
10-09-11 조회 2,955
10-06-30 조회 3,621
10-06-30 조회 2,447
10-06-30 조회 2,411
10-06-30 조회 2,560
10-06-11 조회 2,472
글쓰기