ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

jQueryプラグイン, フルスクリーン, 動画

YouTubeの動画を背景にフルスクリーンで動画を流す「jquery-tubular」

背景にフルスクリーンで動画を流す「jquery-tubular」

サイトの背景で動画を流して、お洒落に演出するならこの「背景にフルスクリーンで動画を流すjquery-tubular」。

jQueryを使用して、YouTubeの動画をサイトの背景でフルスクリーンで流すことができます。

ということで、サンプル作ってみました。こんな感じになります

→ 背景にフルスクリーンで動画を流す「jquery-tubular」サンプルページ

使用方法は続きをご覧下さい。


まずは、「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は実行されないようです。

以下はサンプルのソース。ご参考まで。

この記事と関連してると思われる記事:


4 コメント

  1. nakamura yoshihiko

    背景にフルスクリーンで動画を流す「jquery-tubular」
    大変興味深く拝見させて頂きました!
    サンプルサイトを拝見しましたが、ページが表示した時点で、再生マークをクリックすることなく、動画がながれるようにすることは可能でしょうか?
    宜しくお願いします!!

    • ぱんにゃっと

      確信したところ、最新の「jquery-tubular」を使用しないと正しく動かないようです。
      以前はページ表示と同時に動画が再生されていましたので、おそらくYouTubeの仕様が変わったからと思います。
      サンプルページも最新の「jquery-tubular」をダウンロード&上書きして使用したところ正しく作動しました。
      ご指摘ありがとうございます!

  2. なかなか良さげなJSなんですが、サンプルを見てみると動画の読み込みが終わった辺りで動画が止まってしまいます。
    また仕様変更があったのでしょうか?

    • pannyatto

      コメントありがとうございます。YouTubeの仕様が変わるとうまく動かなかったりします。JSプラグインの最新版を利用してみると、改善されていたりしますので試してみて下さい。

Leave a Reply

Theme by Anders Norén