[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。
var w = $(window).width();
まずは、「jquery-tubular」のダウンロードページから最新のjquery.tubular.jsをダウンロードします。
<head>部分にJavaScriptとcssの設定をします。
<link href=”css/screen.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” charset=”utf-8″ src=”http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”http://code.jquery.com/jquery-1.4.3.min.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”js/jquery.tubular.js”></script>
と設定します。さらに
<script>
$(function(){
$(‘body’).tubular(‘SHRUT_FpMBs‘ //YouTube動画のID
,’backmovie‘); //表示するためのID
});
</script>
で、YouTube動画のIDと表示する要素IDを指定します。
YouTube動画のIDは、YouTube動画のページから【共有】ボタンをおしたところで確認できます。
ちなみに動作を確認するときは、サーバーにアップして確認します。ローカル環境のなかではYouTubeは実行されないようです。
