カメラとか、ノートとか。

X-E2が好きなおっさんのブログ

Youtube動画をフルスクリーンで背景に

jQueryの「jquery-tubular」を使ってみた。
jsのダウンロード先はこちら
jQueryこちら

サンプルページ(音楽と雲が流れます)

以下手順メモ。
スクリプトのソースをhead内に記述。

<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="jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>
<script>
$(function(){
$('body').tubular('Youtube動画のID','DIVの任意のID');});
</script>


ここで、"YoutubeのID"は使いたい動画のIDです。
「共有」で探ったほうがわかりやすいかな。
f:id:ni9eball:20120927012805p:plain


そして「DIVの任意のID」は自分のHTMLソースの中で画面全体を囲む名前「DIV id="これ"」。"wrapper"や"container"を使っている人が多いのではないのでしょうか。

実用性は低いが結構感動した。
webって面白い。


動画(YoutubeID)を変えるだけでいろいろ楽しい。
サンプル2(音楽とサカナクションが流れます)