Pickupニュース

jquery.mb.YTPlayer
jQueryプラグイン

jquery.mb.YTPlayer

背景にYouTubeをループして表示するjQueryプラグイン
Webページの背景にYouTube動画をループして表示させることが出来るjQueryプラグインです。

jquery.mb.YTPlayerのリンク(ファイルをダウンロードして利用する場合)

リンク先のClone or downloadDownload ZIPをクリックして、ファイルをダウンロードします。

Webサイト

jquery.mb.YTPlayerの準備

jquery.mb.YTPlayerという名前のフォルダを新規作成し、そこにダウンロード・解凍後の jquery.mb.YTPlayer-masterdist フォルダの中からjquery.mb.YTPlayer.js(またはjquery.mb.YTPlayer.min.js)、cssフォルダを移動します。

HTMLマークアップ

サーバーにjquery.mb.YTPlayerフォルダをアップロードし、<head>タグ内にjquery.mb.YTPlayer.js(またはjquery.mb.YTPlayer.min.js)とjQueryまでのスクリプトパス、jquery.mb.YTPlayer.min.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="path/jquery.mb.YTPlayer/jquery.mb.YTPlayer.js"></script> <link rel="stylesheet" href="path/jquery.mb.YTPlayer/css/jquery.mb.YTPlayer.min.css" />

jquery.mb.YTPlayerのリンク(CDNを利用する場合)

jquery.mb.YTPlayerはcdnjサービスcdnjでも配信されていますので、リンクを貼るだけでプラグインを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているjquery.mb.YTPlayer.js(またはjquery.mb.YTPlayer.min.js)とjQueryまでのスクリプトパス、jquery.mb.YTPlayer.min.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.9/jquery.mb.YTPlayer.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.9/css/jquery.mb.YTPlayer.min.css" />

基本的な使い方

HTMLマークアップ

jquery.mb.YTPlayerは、data-property属性に設定を記述します(わかりやすいように改行を入れています)。
HTMLCopy
<div id="bgVideo" data-property="{ videoURL: 'https://www.youtube.com/watch?v=tq75nkjL6a8', mute: true, showControls: false }">jquery.mb.YTPlayer</div>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$("#bgVideo").YTPlayer();

デモ

背景は該当ウィンドウがアクティブな状態の時のみ再生を開始し、外れると再生が止まります。

        <div class="box"><p>bodyの背景全体にYouTubeの動画が再生されます。</p></div>
        <div id="bgVideo" data-property="{
          videoURL: 'https://www.youtube.com/watch?v=tq75nkjL6a8',
          mute: true,
          showControls: false
        }">jquery.mb.YTPlayer</div>
    

        .box{
            background: rgba(255, 255, 255, 0.5);
            padding: 10px;
            width: 50vw;
        }    
    

        $(function () {
            $("#bgVideo").YTPlayer();
        });
    

data-propertyの設定

jquery.mb.YTPlayerのdata-propertyに設定するオプションです。
プロパティ 内容 初期値 パラメータ
videoURL 表示するYouTubeのURL(短縮 , ID可) URL
containment 背景にYouTubeを表示する要素(’select’で自身) ‘body’ jQuery セレクタ / ‘selef’
mute 音声オフ false true / false
vol 音量(muteがfalse時のみ) 数値(1~100)
showControls YouTubeコントローラ true true / false
loop ループ回数 true true / false / 数値
align 配置 ‘center,center’ 下図参照
startAt 開始点 0 数値(秒で指定)
stopAt 停止点(0で最後まで) 0 数値(秒で指定)
quality 品質 ‘default’ ‘default’ / ‘small’ / ‘medium’ / ‘large’ / ‘hd720’ / ‘hd1080’ / ‘highres’
autoPlay 自動再生 true true / false
addRaster ラスターイメージの表示 false true / false
opacity 透過度 1 数値(0~1)

2 件のコメント

コメントを残す

記事ランキング