CODE jQuery

YouTubeを背景動画にしてフルスクリーンで流すjQueryプラグイン「Tubular」

投稿日:2019年10月21日 更新日:

YouTubeを背景動画にしてフルスクリーンで流すjQueryプラグイン「Tubular」

Webサイトのページ背景に動画を流して、お洒落に演出したい方にオススメなのがこの「Tubular」というjQueryプラグイン。

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

Youtubeを利用しているので、表示も軽くて快適です。

設定も簡単です。サンプルを作ってみました。

※ iPhoneのSafariではうまく動作しない場合があります。

「Tubular」の使い方は、続きをご覧下さい。

「Tubular」の設置方法

まずは、Tubularのダウンロードページから、jquery.tubular.1.0.1.zipをダウンロードします。

https://code.google.com/archive/p/jquery-tubular/downloads

ダウンロードしてきた一式のファイルの中で、利用するのは以下のファイルになります。

  • screen.css
  • jquery.tubular.1.0.js

<head>~</head>で、jQuery本体およびscreen.cssとjquery.tubular.1.0.jsを読み込ませます。パスに注意しましょう。

<link href="css/screen.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>

Tubularの設定は次のようにします。

<script>
$(function() {
    $('document').ready(function() {
        var options = { videoId: 'YouTube動画のID' };
        $('#要素ID名').tubular(options);
    });
});
</script>

例えば以下のような感じになります。

YouTube動画のIDが「SHRUT_FpMBs」で、#ID名が「#wrapper」の場合。

<script>
$(function() {
    $('document').ready(function() {
        var options = { videoId: 'SHRUT_FpMBs' };
        $('#wrapper').tubular(options);
    });
});
</script>

最後に<body>~</body> タグ内を指定した#ID名で囲みます。

<body>
    <div id="wrapper">
        ここにコンテンツ
    </div>
</body>

任意でオプションでいろいろな追加設定ができますが、特に指定がなければそのままアップして大丈夫です。

  • mute: true
  • repeat: true
  • width: $(window).width() // no need to override
  • wrapperZIndex: 99
  • playButtonClass: 'tubular-play'
  • pauseButtonClass: 'tubular-pause'
  • muteButtonClass: 'tubular-mute'
  • volumeUpClass: 'tubular-volume-up'
  • volumeDownClass: 'tubular-volume-down'
  • increaseVolumeBy: 10 // increment value; volume range is 1-100
  • start: 0 // starting position in seconds

YouTube動画のIDの確認方法

Youtubeの動画再生ページから、共有を押すことでYouTube動画のIDを確認することができます。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <title>Tubularサンプル | キツネノシッポ</title>
    <link href="css/screen.css" rel="stylesheet" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
    <script>
    $(function() {
        $('document').ready(function() {
            var options = { videoId: 'SHRUT_FpMBs' };
            $('#wrapper').tubular(options);
        });
    });
    </script>
</head>

<body>
    <div id="wrapper">
        <div id="main">
            <h1>背景にフルスクリーンで動画を流す「Tubular」jQueryプラグインサンプル</h1>
            <div class="black-50">
                背景で動画が再生され、このような感じになります。
            </div>
        </div>
    </div>
</body>

</html>

-CODE, jQuery
-

Copyright© キツネノシッポ , 2020 All Rights Reserved Powered by STINGER.