ユーチューブをホームページに貼り付ける方法

解決済

質問者：hizirida
質問日時：2010/03/11 23:42
回答数：3件

ユーチューブで検索した結果を自分のホームページに貼り付ける方法って、
あるのでしょうか？
現在上・下２段のフレームで、下の段に抽出結果をオンタイムで表示できたら、一番好ましいんですが・・・。
もし希望する事ができたとしても、主催者側（ユーチューブ）はペナルティーを
課すことがあるのでしょうか？

ご存知の方、回答をよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yyr446
回答日時：2010/03/15 10:35

＜続き＞

まずDOC宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.0　STRICT）にしてｒますが、xhtmlでもだいじょうぶそう
（XHTMLにするならタグは適切に変えてください）
次に文字コード
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
GoogleAPIを素直に使うためUTF-8で作成するのが無難です。
CSS定義の部分は、とりあえずそのままコピーして、
次からがスクリプト（<head>に全scriptを定義しています）
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAG93o66s6 …
のkeyの値は、↓からあなたのサイトのGoogleAPIキーを取得してください。（無償です）
http://code.google.com/intl/ja/apis/ajaxfeeds/si …
http://code.google.com/intl/ja/apis/maps/signup. …
とか、キーはどのAPIでも共通のようです。
以下はそのままコピーしてください。
Google提供のYouTube JavaScript Player API で使うプレーヤー
Swfobject2.0の準備です。フラッシュ動画も再生できます。（解説は参考サイトへ）
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>

次がjQUERYライブラリの読み込みです。
まず↓よりｊQUERYのバージョン1.3.2以上をダウンロードして、ご自身の
サイトに設置してください。
入手先
http://docs.jquery.com/Release:jQuery_1.3.2
設置したら、
<script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script>
を自分のサイトに合わせてsrc部分を変えて下さい。
この下のscript部分が本体ですから、そのままコピーしてください。
<script type="text/javascript" charset="utf-8">

</script>

これで動作するはずですが、本体の解説は、また機会があれば．．．．

補足
<script type="text/javascript">
google.load("feeds", "1");
</script>
は、ごみ（不要）だったかも

参考URL：http://code.google.com/intl/ja/apis/youtube/js_a …

この回答への補足

続き01

var url='http://gdata.youtube.com/feeds/api/videos?';
$.ajax({
type: "GET",
url:url,
data:{
"vq":kensaku_key,
"orderby":"relevance_lang_ja",
"format":"5",
"racy":"include",
"alt":"json-in-script",
"max-results":"25",
"start-index":start
},
dataType:"jsonp",
success: function(data,datatype){
dataout(data);
},
error:function(XMLHttpRequest, status, errorThrown){
　 alert(XMLHttpRequest.url + ":"+ status);
}
});
}

function NaviMenuAdd(pageset,pages,itemPerPage){
var start=pageset*10;
pages=pages+start;
var nextguide=$(document.createElement("span"));
for(var i=start;i<pages;i++){
var startItem = i*itemPerPage +1;
var nexta =$(document.createElement("a"));
nexta.attr({href:"javascript:void(0);"});
nexta.text((i+1)+"頁目");
nexta.bind("click",{start:startItem},function(event){
event.preventDefault();
Go_Search(event.data.start);
});
nextguide.append(nexta);
}
return nextguide;
}

function dataout(data){
$('#Result').empty();
var hits= parseInt(data.feed.openSearch$totalResults.$t);
var itemPerPage = parseInt(data.feed.openSearch$itemsPerPage.$t);
var pages=(hits % itemPerPage==0)?parseInt(hits/itemPerPage):parseInt(hits/itemPerPage)+1;
var currentItem = parseInt(data.feed.openSearch$startIndex.$t);
var currentPage =parseInt(currentItem/itemPerPage);
$('#Result').append('<hr><span>＜検索結果＞ ' + hits +'件</span>');

//Page Navigation Add
var nextguide;
if (pages<=10){
var pages=Math.min(
(hits % itemPerPage==0)?
parseInt(hits/itemPerPage):
parseInt(hits/itemPerPage)+1,10);
nextguide = NaviMenuAdd(pageset,pages,itemPerPage);
}else{
nextguide = NaviMenuAdd(pageset,10,itemPerPage);
var nextp =$(document.createElement("a"));
nextp.attr({href:"javascript:void(0);"});
nextp.text(">>");
nextp.bind("click",function(event){
event.preventDefault();
pageset=pageset+1;
Go_Search(pageset*10*itemPerPage+1);
});
nextguide.append(nextp);

補足日時：2010/03/18 00:35

通報する

- 0
- 件

通報する

この回答へのお礼

もの凄く参考になりました。

自分なり理解し作っては見たんですが、

どうしても文字化けしてしまいます。

エンコードで日本語を指定すると普通に動くんですが、

何か誤りがあるのでしょうか？

作成したソースをコピペいたします。

ご意見いただけると助かります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>YouTube Search</title>
<style type="text/css">

</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA9YcQyJ3Q …
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>
<script type="text/javascript" charset="utf-8" src="/douga/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
<!--
var playseq;
var pageset;

$(document).ready(function(){
$("input[type='button']").click(function(){
pageset=0;
Go_Search(1);
});
});

function onYouTubePlayerReady(playerId) {
for(var i=1;i<playseq+1;i++){
if(playerId=="ytplayer"+i){
var ytplayer = document.getElementById("myytplayer"+i);
ytplayer.playVideo();
}
}
}

function Go_Search(start){
playseq=0;
var kensaku_key =document.getElementById("kensaku_key").value;

通報する

お礼日時：2010/03/18 00:31

No.2

回答者： yyr446
回答日時：2010/03/15 10:00

＜スクリプトをＨＩＭＬに埋め込むってことなんでしょうか？＞

はいそうです。HTMLだけでは困難（固定的なものならできるかもしれませんが）
javascriptの埋め込みが必須です。(よってjavascriptの実行を許可してない
ユーザーは無視しています。）
＜上部の広告はしっかり出ましたが、これは削除してよいものなのでしょうか？＞
広告部分は、全く関係ありません。無視してください。私の借りてる無料サイト
の制約です。
＜付随する何か必要なツール？ファイル等必要なんでしょうか？＞
はい、jQueryライブラリーとか、GoogleAPIの利用キーとかが必用です。
（全部無償です。）
私のサンプルのHTMLの<BODY>部分は、
<body>
<img src="http://www.youtube.com/img/pic_youtubelogo_123x6 … style="float:right">
<h3>Google YouTube Search By Google DATA API</h3>
検索キーワード：<input id="kensaku_key" type="text" style="width:30%;">
<input type="button" value="検索">
<div id="Result"></div>
</body>
のみです。
さらに、
検索キーワード：<input id="kensaku_key" type="text" style="width:30%;">
<input type="button" value="検索">
<div id="Result"></div>
が必要な部分で、
検索キーワード：<input id="kensaku_key" type="text" style="width:30%;">
が検索キーワードを入力する部分、
<div id="Result"></div>
が結果表示領域です。
これをあなたのページに組み込めるのですが、
レイアウトを崩さないようにするにはCSSも若干工夫してください
サンプルのCSSは、
<style type="text/css">

</style>
となっています。背景色や文字色はどうでもいいですが、
領域の大きさや配置を調整する時はよく考慮してください。

肝心のスクリプト部分は、汎用的なクラスライブラリー的に作っていませんが、
そのままコピーすれば、なんとか実行できると．．．
若干、解説を続けます。
（続く．．．）

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2010/03/12 19:36

自分のサイト用のオリジナルなページにいちから実装するのは

結構ハードルが高いですよ。
ユーチューブの検索は　Google DATA APIというAPIを使い、
プレーヤーもそこのPlayer APIを使っちゃいましょう。
http://code.google.com/intl/ja/apis/youtube/over …
http://code.google.com/intl/ja/apis/youtube/refe …
に解説されてます。
肝となる処理は、
http://gdata.youtube.com/feeds/api/videos?
にAJAXでGET要求して、結果をJSONでかえしてもらい、
DOM操作で結果を成形して、結果リストとplayerのコンテナーを作る。
結果リストがクリックされたら、DOM操作でコンテナー内に
playerオブジェクトを作り、検索結果の動画のURL等をembedして
再生させる。
といったところです。

サンプルの余分な部分を取り去っていくともっとシンプルな形が見えてき
ます。jQuery使っているから短く書けると思います。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
記載されてますリンク先は英語で理解できませんでした。
用はスクリプトをＨＩＭＬに埋め込むってことなんでしょうか？
っと思い参考サンプルを私のｈｔｍｌにそのまま埋め込んでみたんですが、
サンプルみたいに抽出できませんでした。
また、上部の広告はしっかり出ましたが、これは削除してよいものなのでしょうか？
ｈｔｍｌやスクリプトだけの問題ではなく、付随する何か必要なツール？
ファイル等必要なんでしょうか？
ご回答よろしくお願いします。

通報する

お礼日時：2010/03/12 22:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！