まず、中央寄せにする
これはCSSで設定
head タグの中へ
<style>
body{
test-align:center;
}
</style>
とする
test-align:center;
は中央寄せという意味
次に、この設定に
#player{
width:640px;
height:368px;
}
というように、画面の大きさを設定
最初の＃は
id を意味している
id=”player”
なら
#player
id=”pause”なら #pause となる
ちなみに、なにも表示していない場合
ブラウザを最大化するとなにもない画面になっている
コントロールするためのスクリプトは
メンテを考えて外部ファイルを作成し読み込む
java script の構文は
$function(){
//処理
});
というかんじになる
youtubeの API のリファレンスがあり
それは
https://developers.google.com/youtube/
ドットインストールに解説があったので
参考にさせていただきました
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters
これが検索時のパラメータ一覧
今回は、java script ファイルの編集
まずは Youtube API を使ってみた
使ったのはver 2.0
使う項目は
Retrieving and Searching for Video
の中にある
API Query Palameters
GETを使いベースURLへアクセス
そのときにオプションを付ける
ベースURLを変数へ格納する
var url =”https://gdata.youtube.com/feeds/api/videos”;
そして、オプションも変数へ格納
var options ={
q: encodeURIComponent($(‘#q’).val()),
alt: “json”,
max-results:10.
v:2
};
q は検索キーワード
$(‘#q’) は
＃はid の意味なので
id=”q”
val() はその値
つまり、
<input type=”text” id=”q”>
で入力した検索キーワードということ
q:$(‘#q’).val();
だと、文字化けなどの問題もあるので
エンコードする
これを解決する関数が
encodeURIComponent()
なので、
q: encodeURIComponent($(‘#q’).val()),
alt: “json”, は
データ形式を json に指定
他にもXMLなどがある
max-results:10.
これは最大取得数＝１０という意味
v:2
はvetsion=2 ということ