jQuery/Vanilla Javascript

【jquery.tubular】Webサイトの背景にYouTube動画を実装し、スマホも対応させる方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回は背景に YouTube 動画を実装する方法をサンプル付きで解説します。
表示速度が遅いなどのデメリットがありますが、なんだかんだでかっこよくユーザにインパクトも与えます。
また、 スマホ対応がかなりの手間だったので画面ロック後でも再生される方法なども併せてご紹介します。

mp4などの動画ファイルを背景動画にする方法はこちらになります。
【jQuery】サイトの全画面背景で動画再生ができるvideの使い方。

YouTubeの動画を背景に設定するプラグインです。
YouTubeApiの機能を背景動画向け(ミュート、動画部分のクリック無効など)にカスタマイズされたjsです。

今回はスマホ用にカスタマイズするのでCDNではなく以下の公式サイトからjsファイルをダウンロードします。
http://www.seanmccambridge.com/tubular/

以下のように設定します。「XXXXXXXX」のところに表示したいYouTube動画IDを設定します。
#wrapper部分に動画が表示されます。

<script src="js/jquery.tubular.1.0.js"></script>
<script>
$('document').ready(function() {
	var options = { videoId: 'XXXXXXXX', start: 0};
	$('#wrapper').tubular(options);
});
</script>
<div id="wrapper"></div>

こちらで基本的な設定はOKです 。

jquery.tubular.1.0.jsのデフォルトでは ユーザの意図したいパケット通信を防ぐために以下のようにスマホでの再生ができない状態になっています。

スマホでも動画を再生させたい場合はplaysinline: 1を設定します。
jquery.tubular.1.0.js内を以下のように変更するとスマホでもループ再生されます。

window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('tubular-player', {
        width: options.width,
        height: Math.ceil(options.width / options.ratio),
        videoId: options.videoId,
        playerVars: {
            controls: 0,
            showinfo: 0,
            modestbranding: 1,
            wmode: 'transparent',
            loop: 1, // ループの設定
			playlist:options.videoId,// playlistも設定
			playsinline: 1,//←★スマホ対応
			rel:0// 関連動画
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}




ただしスマホ再生時に画面ロックをし、再度表示すると動画は停止したままになってしまいます。

そこで jquery.tubular.1.0.js内のonPlayerStateChange部分に停止した場合もリスタートするように記述すると、スマホで画面ロック後なども動画が再生されます。

参考:IFrame Player API

window.onPlayerStateChange = function(state) {// playerの状態が代わった場合
    if (state.data === 0 && options.repeat) { // 終了していたらリスタート
        player.seekTo(options.start); // restart
    }
    if ((state.data === 2 || state.data == YT.PlayerState.ENDED) && options.repeat) {// 停止していたらリスタート
        player.seekTo(options.start);
        player.playVideo();
        //alert("data2andENDED");
    }
}

関連動画を表示しない設定(rel:0)にしていても停止時にはYouTubeでの関連動画設定の変更により該当チャンネルの動画が表示されてしまいますので上記の処理を追加する必要があります。

サンプル

動画をサイトの背景にする方法はいくつかありますが個人的にはYouTubeApiを割と背景動画用に整えてくれているjquery.tubularを使用するのが最善でした。スマホでの動画停止後の再生についてはプラグインに組み込まれていないのでカスタマイズに手間がかかるイメージでした。

uhaha

スマホのデータ量の進化にともないスマホ自動再生禁止の時代が終わりを告げる~

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*