ベストアンサー

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

2010/03/11 23:42

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

hizirida
お礼率46% (6/13)

HTML
回答数3
ありがとう数7

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/03/15 10:35 回答No.3

＜続き＞まず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=ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSBRA6NK6XyYISfT41Z7mY_whiu7HMg"></script> のkeyの値は、↓からあなたのサイトのGoogleAPIキーを取得してください。（無償です） http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html http://code.google.com/intl/ja/apis/maps/signup.html とか、キーはどの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_api_reference.html,http://code.google.com/p/swfobject/

質問者

お礼 2010/03/18 00:31

もの凄く参考になりました。自分なり理解し作っては見たんですが、どうしても文字化けしてしまいます。エンコードで日本語を指定すると普通に動くんですが、何か誤りがあるのでしょうか？作成したソースをコピペいたします。ご意見いただけると助かります。 <!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=ABQIAAAA9YcQyJ3Q07UwV5nChqoxRBScuRZdM3ckXa6bfH24wvjjpfo4RRT8sE26cEGOoCtUTjLFsFMtrVbIpA"></script> <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:35

続き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);

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2010/03/15 10:00 回答No.2

＜スクリプトをＨＩＭＬに埋め込むってことなんでしょうか？＞はいそうです。HTMLだけでは困難（固定的なものならできるかもしれませんが） javascriptの埋め込みが必須です。(よってjavascriptの実行を許可してないユーザーは無視しています。）＜上部の広告はしっかり出ましたが、これは削除してよいものなのでしょうか？＞広告部分は、全く関係ありません。無視してください。私の借りてる無料サイトの制約です。＜付随する何か必要なツール？ファイル等必要なんでしょうか？＞はい、jQueryライブラリーとか、GoogleAPIの利用キーとかが必用です。（全部無償です。）私のサンプルのHTMLの<BODY>部分は、 <body> <img src="http://www.youtube.com/img/pic_youtubelogo_123x63.gif" 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> となっています。背景色や文字色はどうでもいいですが、領域の大きさや配置を調整する時はよく考慮してください。肝心のスクリプト部分は、汎用的なクラスライブラリー的に作っていませんが、そのままコピーすれば、なんとか実行できると．．．若干、解説を続けます。（続く．．．）

yyr446
ベストアンサー率65% (870/1330)

2010/03/12 19:36 回答No.1

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

質問者

お礼 2010/03/12 22:38

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