人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Youtubeをタグを使って、自分のホームページに一覧で表示するような、PHPまたはJavascriptのサンプルを公開しているサイトはありますでしょうか?ご存知のかたよろしくお願いします。

●質問者: HAYA
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント

全部公式リファレンスに書いてあると思います。

デベロッパー ガイド: Data API プロトコル - カテゴリとキーワードによる検索 - YouTube の API とツール - Google Code

正当なやり方かどうかわかりませんが、jamiroquaiタグのRSSから読み込むサンプルを書いてみました。

(youtubeサイトのタグの検索結果とrssの検索結果の順番が異なるのは仕様だと思います。)



<?php
$rss = simplexml_load_file('http://gdata.youtube.com/feeds/api/videos/-/jamiroquai/');
foreach ($rss->entry as $item) {
 preg_match('/\/videos\/(.+)/', (string)$item->id, $videoId);
 $videoId = $videoId[1];
 $title = (string)$item->title[0];
 $href = (string)$item->link['href'][0];
 echo '<div>';
 echo '<span>' . $title . '</span>';
 echo '<iframe width="560" height="315" src="http://www.youtube.com/embed/' . $videoId . '" frameborder="0" allowfullscreen></iframe>';
 echo '</div>';
}




altパラメータでJSONを指定することができます。

デベロッパー ガイド: Data API プロトコル - API クエリ パラメータ - YouTube の API とツール - Google Code


jQueryを使ってJSON読み込み。

http://jsfiddle.net/nWJk7/

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function() {
 $.getJSON('http://gdata.youtube.com/feeds/api/videos/-/jamiroquai/?alt=json', function(json) {
 var videoIds = json.feed.entry.map(function(e){
 return e.id.$t.match(/\/videos\/(.+)/)[1];
 });
 videoIds.forEach(function(e) {
 var iframe = document.createElement('iframe');
 iframe.src = 'http://www.youtube.com/embed/' + e;
 document.body.appendChild(iframe);
 });
 });
});
</script>
</head>
<body>
</body>
</html>

HAYAさんのコメント
すごくお詳しいですね。参考にさせてもらいます。

HAYAさんのコメント
試してみました!ほぼ理想形です!HTML内に<div id="yvideo"></div>で囲った中に表示させたいと思っています。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ