簡単!youTubeの動画を全画面背景に配置し自動再生やループ再生を実現する jQuery Plugin【YTPlayer】の実装方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【簡単!youTubeの動画を全画面背景に配置し自動再生やループ再生を実現するjQuery Plugin【YTPlayer】の実装方法】です。このところ動画を扱うことが続いたのでメモしておきます。動画を背景にフルスクリーンに指定するプラグインは数々こざいますが、色々試した結果【YTPlayer】という素晴らしいプラグインに落ち着きました。本プラグインはループや自動再生が容易で且つループのつなぎが自然、さらには特定要素にFIXする事も可能で再生・停止ボタンや再生バー関連のカスタマイズも容易とかなり有用です。もし機会があればお試しください。

実装方法 > DOWNLOAD

シンプルに実装する場合の例です。この他にも再生/停止の非表示やループを停止に関する設定が行えます。

HTML


<a id="bgndVideo" class="player" data-property="{videoURL:’ここにYOUTUBEのリンク’,containment:’body’,autoPlay:true, mute:false}"></a>

JS

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>
<script type="text/javascript">
$(function(){
$(".player").mb_YTPlayer();
});
</script>

設定について

自動再生やループの停止、再生ボタンの表示非表示、読み込み完了後の動作等細かい所まで設定が可能です。個人的に今後も使うだろうと思いましたのでJS内を読んでオプションの役割を書き出してみました(若干自信はないですが…)。この他にも様々な設定値が存在するようです。


<a id="bgndVideo" class="player"
data-property="{
videoURL:’ここにYOUTUBEのリンク’,
containment:’body’,
autoPlay:true,
mute:false,
startAt:0,
opacity:1,
loop:true,
showControls:true,
printUrl:true,
onReady:function(){console.log(‘START’)}
}"
></a>
オプション 設定値 概要
videoURL http://www.youtube.com/watch?v=xteoc9zrC2w YOUTUBEのリンク
autoPlay true / false 自動再生の有無
mute true / false 音声の有無
startAt 0 ~ 1 最初の透明度
opacity 0 ~ 1 ロード後の透明度
loop true / false ループ再生の有無
showControls true / false 再生・停止ボタンの表示非表示
printUrl true / false 動画ページへのリンク
onReady onReady:function(){console.log(‘START’)} 動画再生準備が完了した段階で何らかの操作を実装

再生ボタンや再生バーの設定について

再生ボタンや停止ボタン、再生バーの表示はプラグイン設定時に下記のHTMLが自動的に挿入されますのでカスタマイズを施す場合には下記に対してCSSの記述を行います。再生バーに関してはclass=”mb_YTVPLoaded”がローディング状況を示しclass=”mb_YTVTime”が現在の再生時間を示しいるようです。この再生バーは本家youtubeのようにクリックで再生位置の指定が行えます。


<span id="controlBar_bgndVideo" class="mb_YTVPBar">
<div class="buttonBar">
<span class="mb_YTVPPlaypause">PAUSE </span>
<span class="mb_YTVPMuteUnmute">MUTE </span>
<span class="mb_YTVPTime">01 : 01 / 02 : 29</span>
<span class="mb_YTVPUrl"></span>
<span class="mb_OnlyYT"></span>
</div>
<div class="mb_YTVPProgress" style="position: absolute;">
<div class="mb_YTVPLoaded" style="position: absolute; left: 0px; width: 10%;"></div>
<div class="mb_YTVTime" style="position: absolute; left: 0px; width: 5%;"></div>
</div>
</span>


以上になります。