YouTube Player APIにより背景で動画を再生させる

Youtubeの動画再生にも一手間かけることもあるのですが、少しやっかいな話になってきた、というお話です。？本日は「YouTube Player APIにより背景で動画を再生させる」についてです。

こんにちは。猫ITソリューションズ広報の齊藤メイ（♀）です。本日は、「YouTube Player APIにより背景で動画を再生させる」についてです。

今回は以前紹介した、

の~~更なる追加要件~~機能改良・完全版です。としては、要は本家サイトから再生用htmlタグで済ませるだけじゃあダメという場合にはYoutube Player APIで何とかしよう~~と思い立ったらクライアントに「何でも出来る」と思われたらしく色々と追加要望が出された~~というお話です。

要件と仕様

相変わらず生々しい内容ですが気にしないでください。

要件

1ページに載せるYoutube動画が10～20と多い。
動画は割と頻繁に（非開発者が）更新しなくてはいけない。
~~他にも色々やりたいことがある。~~
1ページで再生させる動画は一つだけ。既に再生していた動画はストップさせる。
[NEW!] ページ上部の背景いっぱいに動画を再生させる。

「ページ上部の背景いっぱい」という言い方でどういうものか分かるでしょうか？以下は「背景いっぱい」の例です。これを上部だけという感じです。
jQuery Youtube background video for your website | Pupunzi

※なおこの例は「背景いっぱい」だけをカンタンに実装するjQueryプラグイン「JQUERY.MB.YTPLAYER」のページです。

仕様

YouTube Player APIで動画を制御することに変わりありません。

YouTube Player APIについてはこちらをご覧ください。なお今回はiframe APIを使用しています。
iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API

サンプル

サンプルに必要なソースはhtmlとJavaScriptです。今回Youtube Player APIを含めライブラリ系は全てCDNで外部から読み込んでいます。

html

htmlは以下になります。かなり抜粋していますのでご注意ください。なおjQueryのCDNはここで確認→コピペしてください。
jQuery CDN

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
<div id="bgVideo"></div>
<div id="player01"></div>
<div id="player02"></div>
<div id="player03"></div>

JavaScript

JavaScriptは以下です。動画再生サイズや動画IDなどの値は、適時皆さんの環境に合わせて置き換えてください。

// 埋め込むyoutubeのIDと埋め込むエリアを指定
var ytData = [
    {
        id: 'YouTubeの動画ID 1',
        area: 'player01'
    }, {
        id: 'YouTubeの動画ID 2',
        area: 'player02'
    }, {
        id: 'YouTubeの動画ID 3',
        area: 'player03'
    }

];

var ytPlayer = [];
var ytPlaying, ytStop, ytPlay;

// YouTube Player APIを読み込む
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// API読み込み後に、各エリアにプレーヤーを埋め込む
function onYouTubeIframeAPIReady() {
    for (var i = 0; i < ytData.length; i++) {
        if (i == 0) {
            //console.log("メインビジュアル埋め込み");
            var ytWidth = 480;
            var ytHeight = 270;
            ytPlayer[i] = new YT.Player(ytData[i]['area'], {
                height: ytHeight,
                width: ytWidth,
                videoId: ytData[i]['id'],

                playerVars: {
                    rel: 0,
                    controls: 2,
                    showinfo: 0,
					loop: 1,
					playlist: ytData[i]['id'],
                    wmode: 'transparent'
                },
                events: {
                    'onReady': onPlayerReady,
					//'onStateChange': onPlayerStateEnd
                }
            });
        } else {
            //console.log("コンテンツ動画埋め込み");
            var ytWidth = 480;
            var ytHeight = 270;
            ytPlayer[i] = new YT.Player(ytData[i]['area'], {
                height: ytHeight,
                width: ytWidth,
                videoId: ytData[i]['id'],
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    }
}

function onPlayerReady(e) {

    movieAdjust();

	//PCの場合
	if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
		ytPlayer[0].playVideo();
    	ytPlayer[0].mute();
	}
	//spの場合
	else{
	//
	}

}
/*
function onPlayerStateEnd(e) {
	//console.log("e.data = " + e.data);
	if(e.data == 0){
		movieAdjust()
	}
}
*/

// プレーヤーの状態に変化があった時に実行
function onPlayerStateChange(event) {
    // 各プレーヤーの状態を確認
    for (var i = 1; i < ytData.length; i++) {
        var thisState = ytPlayer[i].getPlayerState();
        if (thisState == 1 && ytPlaying == undefined) {
            ytPlaying = i;
        } else if (thisState == 1 && ytPlaying != i) {
            ytStop = ytPlaying;
            ytPlay = i;
        } else {}
    }
    // 同時再生があった場合、元々再生していた方を停止する
    if (ytStop != undefined) {
        ytPlayer[ytStop].pauseVideo();
        ytStop = undefined;
    }
    // 現在再生中のプレーヤー番号を保存しておく
    if (ytPlay != undefined) {
        ytPlaying = ytPlay;
        ytPlay = undefined;
    }
	
}

// メインビジュアルを要素最大表示
function movieAdjust() {

    // ムービー全画面スクリプト（PC用）
    // ※動画の画角比率を設定。4:3の場合はここを「4/3」に変更
    var movieRatio = 16 / 9;

    var adjustWidth = $(window).width();
    var adjustHeight = $(window).height();
	
    if (adjustHeight > adjustWidth / movieRatio) {
        adjustWidth = adjustHeight * movieRatio;
    }
    $('#bgVideo').css({
        width: (adjustWidth),
        height: (adjustWidth / movieRatio)
    });
	//alert("1w = " + adjustWidth + " h = " + adjustWidth / movieRatio);
}

// 画面リサイズ時と画面ロード時に関数movieAdjust()を実行
$(window).on('resize', function () {
    movieAdjust();
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

// 埋め込むyoutubeのIDと埋め込むエリアを指定

var ytData = [

{

id: 'YouTubeの動画ID 1',

area: 'player01'

}, {

id: 'YouTubeの動画ID 2',

area: 'player02'

}, {

id: 'YouTubeの動画ID 3',

area: 'player03'

}

];

var ytPlayer = [];

var ytPlaying, ytStop, ytPlay;

// YouTube Player APIを読み込む

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// API読み込み後に、各エリアにプレーヤーを埋め込む

function onYouTubeIframeAPIReady() {

for (var i = 0; i < ytData.length; i++) {

if (i == 0) {

//console.log("メインビジュアル埋め込み");

var ytWidth = 480;

var ytHeight = 270;

ytPlayer[i] = new YT.Player(ytData[i]['area'], {

height: ytHeight,

width: ytWidth,

videoId: ytData[i]['id'],

playerVars: {

rel: 0,

controls: 2,

showinfo: 0,

loop: 1,

playlist: ytData[i]['id'],

wmode: 'transparent'

events: {

'onReady': onPlayerReady,

//'onStateChange': onPlayerStateEnd

}

});

} else {

//console.log("コンテンツ動画埋め込み");

var ytWidth = 480;

var ytHeight = 270;

ytPlayer[i] = new YT.Player(ytData[i]['area'], {

height: ytHeight,

width: ytWidth,

videoId: ytData[i]['id'],

events: {

'onStateChange': onPlayerStateChange

}

});

}

function onPlayerReady(e) {

movieAdjust();

//PCの場合

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){

ytPlayer[0].playVideo();

ytPlayer[0].mute();

}

//spの場合

else{

}

function onPlayerStateEnd(e) {

//console.log("e.data = " + e.data);

if(e.data == 0){

movieAdjust()

}

// プレーヤーの状態に変化があった時に実行

function onPlayerStateChange(event) {

// 各プレーヤーの状態を確認

for (var i = 1; i < ytData.length; i++) {

var thisState = ytPlayer[i].getPlayerState();

if (thisState == 1 && ytPlaying == undefined) {

ytPlaying = i;

} else if (thisState == 1 && ytPlaying != i) {

ytStop = ytPlaying;

ytPlay = i;

} else {}

}

// 同時再生があった場合、元々再生していた方を停止する

if (ytStop != undefined) {

ytPlayer[ytStop].pauseVideo();

ytStop = undefined;

}

// 現在再生中のプレーヤー番号を保存しておく

if (ytPlay != undefined) {

ytPlaying = ytPlay;

ytPlay = undefined;

}

// メインビジュアルを要素最大表示

function movieAdjust() {

// ムービー全画面スクリプト（PC用）

// ※動画の画角比率を設定。4:3の場合はここを「4/3」に変更

var movieRatio = 16 / 9;

var adjustWidth = $(window).width();

var adjustHeight = $(window).height();

if (adjustHeight > adjustWidth / movieRatio) {

adjustWidth = adjustHeight * movieRatio;

}

$('#bgVideo').css({

width: (adjustWidth),

height: (adjustWidth / movieRatio)

});

//alert("1w = " + adjustWidth + " h = " + adjustWidth / movieRatio);

}

// 画面リサイズ時と画面ロード時に関数movieAdjust()を実行

$(window).on('resize', function () {

movieAdjust();

});

以上です。
色々と機能を実装したプログラムですが、案外私たちと同じWeb制作会社がLP（＝ランディングページ。1ページで簡潔に全てを宣伝するページ）を作る際にはこのスクリプトを丸ごと使えば事足りるかもしれません。この記事が誰のためなのか意味不明ですいませんが、他の方のお役にも立てることを願います。

要件と仕様

要件

仕様

サンプル

html

JavaScript

関連記事

Blog Categories

Member Profile

広報：齊藤メイ

代表：齊藤智宏

About us:

2022年年頭ご挨拶

2021年、買ってよかったもの

Ryzen 7 3700X + Asrock B450M Pro4 OCベンチマーク

Categories:

Tags:

Archives:

YouTube Player APIにより背景で動画を再生させる

要件と仕様

要件

仕様

サンプル

html

JavaScript

関連記事

Blog Search

Blog Categories

Member Profile

広報：齊藤 メイ

代表：齊藤 智宏

2022年 年頭ご挨拶

2021年、買ってよかったもの

Ryzen 7 3700X + Asrock B450M Pro4 OCベンチマーク

広報：齊藤メイ

代表：齊藤智宏

2022年年頭ご挨拶