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音声オフfalsetrue / false
vol音量(muteがfalse時のみ)数値(1~100)
showControlsYouTubeコントローラtruetrue / false
loopループ回数truetrue / false / 数値
align配置‘center,center’下図参照
startAt開始点0数値(秒で指定)
stopAt停止点(0で最後まで)0数値(秒で指定)
quality品質‘default’‘default’ / ‘small’ / ‘medium’ / ‘large’ / ‘hd720’ / ‘hd1080’ / ‘highres’
autoPlay自動再生truetrue / false
addRasterラスターイメージの表示falsetrue / false
opacity透過度1数値(0~1)

2 件のコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください