ユーチューブ検索ボックス設置

ユーチューブの検索APIをブログやホームページに設置しよう

APIを設置すると以下の様にYOUTYUBEのサムネイルやキーワードを簡易表示させる事が出来ます。


ユーチューブサーチ
Loading...


ユーチューブ検索ボックス設置方法。
!このコードを取得するには、グーグル様の無料アカウントを取得し、ログインしている必要があります。

まずこちらののGoogle AJAX Search API (Beta)Video Search Wizardへアクセスします。

以下の簡単ウィザードが表示されます。
Search Expressionには設置したいキーワードを指定します。初期値に入っている英文字キーワードは消去してしまします。


以下のAJAX Search APIコードが表示されるので全てメモ帳等にコピーして貼り付けします。(念の為保存しても良いです)


AJAX Search APIのコードの張り方

まず検索ボックスを表示するタグを探して、WEBページやブログに検索ボックスとして表示させるタグを切り取ります。
以下の<div>〜〜</div>までの記述を任意の場所に貼り付けることでユーチューブ検索ボックスを表示しなさいとすることが出来ます
<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

次に残りのコードを全てコピーします。
<!-- ++Begin Video Search Control Wizard Generated Code++ -->

中略

<!-- ++Begin Video Search Control Wizard Generated Code++ -->


WEBページやブログhtmlコードの<head>〜〜この間の何処でも良いので貼り付けます〜〜</head>


<head>
<meta htt〜〜
上記の間に貼り付けても問題なく動作します。


貼り付けすると以下の様になります。保存してリロードプレビューで正しく表示されるか確認して作業完了


念の為ですが、検索ボックス表示部分のコード

<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

上記を<body>〜</body>に記載する作業をお忘れなく
例:検索ボックスは自動調整で表示されるので、一度試しに設置して正しく表示されることが確認出来ましたら後ほど配置調整を行うと良いと思います。


簡単ですが説明は以上です

ページトップへ戻る

動画ツールの紹介です。取り扱う動画データは必ず自分の所有物動画(ビデオで撮影した動画や、家庭内でビデオ録画した動画を自分で楽しむ目的のみ)であり、決して諸作権を侵害したりしないようにお願い致します。文化庁 | 著作権

注意、YOUTUBEでは動画のダウンロードはサポート外となります。公式動画のダウンロードについて

エンコードや保存の便利ツール

VIDEO search(ビデオ検索)ボックス設置関係