以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。
以前の記事はこちらです。
YouTube Player APIを使って色々やってみる
■目次
1. 動画のループ再生
動画のループ再生を設定する方法は2種類あります。
1-1. パラメータで設定する
パラメータで設定する場合、loopとplaylistを使用します。
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
playerVars: {
loop: 1, // ループの設定
playlist: 'M7lc1UVf-VE' // 再生する動画のリスト
}
}
);
}
ループの設定はloop: 1 で設定できますが、単一の動画をループさせたい場合はplaylistに同じYouTube IDを指定する必要があります。
1-2. イベントで設定する
イベントで設定する場合、プレーヤーの状態が変更された時に発火するonStateChangeを使用します。
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
events: {
'onStateChange': onPlayerStateChange
}
}
);
}
// プレーヤーの状態が変更されたとき
function onPlayerStateChange(event) {
// 現在のプレーヤーの状態を取得
var ytStatus = event.target.getPlayerState();
// 再生終了したとき
if (ytStatus == YT.PlayerState.ENDED) {
ytPlayer.playVideo();
}
}
onStateChangeを使って、動画の再生が完了したときにプレーヤーを再度再生するようにしています。
2. 動画の自動再生
自動再生もループ再生と同じく、パラメータとイベントの2種類で設定できます。
2-1. パラメータで設定する
パラメータで設定する場合、autoplayを使用します。
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
playerVars: {
autoplay: 1 // 自動再生の設定
}
}
);
}
2-2. イベントで設定する
イベントで設定する場合、onReadyを使用します。
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
events: {
'onReady': onPlayerReady
}
}
);
}
// プレーヤーの準備ができたとき
function onPlayerReady(event) {
// 動画再生
event.target.playVideo();
}
3. タイトルやコントロールバーを出さないようにする
3-1. タイトルとコントロールバーの非表示
プレーヤーの見た目を調整したい場合など、タイトルとコントロールバーを表示させたくない時には、controlsとshowinfoを使用します。
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
playerVars: {
controls: 0, // コントロールバーを表示しない
showinfo: 0 // 動画情報を表示しない
}
}
);
}
controls: 0 で下部のコントロールバー、showinfo: 0で上部の動画情報が表示されなくなります。
ただし、タイトルとコントロールバーを表示しないように設定した場合、動画の右下にYouTubeのロゴが表示されるようになります。
3-2. キーボード操作の制御
3-1のサンプルでコントロールバーでの動画の操作はできなくなりましたが、プレーヤーをクリックしてフォーカスの当たった状態だとキーボードで操作を行うことができます。
キーボードでの操作もさせたくない場合、disablekbを合わせて設定します。
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
playerVars: {
controls: 0, // コントロールバーを表示しない
showinfo: 0, // 動画情報を表示しない
disablekb: 1 // キーボードでの操作をさせない
}
}
);
}
パラメータにdisablekb: 1を設定することで、プレーヤーをキーボードで操作できなくなります。
4. 動画再生の開始位置や終了位置を設定する
動画を指定した時間から再生開始させたい、または指定した時間で再生を終了させたい場合、startとendを使用します。
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
playerVars: {
start: 2, // 動画再生の開始位置
end: 8 // 動画再生の終了位置
}
}
);
}
startとendには正の整数を秒単位で指定します。
今回のサンプルの場合、2秒の位置から再生開始して、8秒で再生が完了します。
5. 動画の画質を変更する
YouTubeはプレーヤーのサイズや再生条件によって動画の画質が自動で設定されてしまいます。
画質を変更したい場合、setPlaybackQuality()メソッドを使用します。
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: 'M7lc1UVf-VE', // YouTubeのID
events: {
'onReady': onPlayerReady
}
}
);
}
// プレーヤーの準備ができたとき
function onPlayerReady(event) {
// 画質の変更
ytPlayer.setPlaybackQuality('hd720');
}
setPlaybackQuality() にはsmall・medium・large・hd720・hd1080・highres・defaultが指定できますが、その動画で用意されている画質しか設定できません。
6. 初期表示をサムネイルにする
YouTubeをページに埋め込むと読み込みが重くなるので、最初はサムネイルを表示して、サムネイルをクリックしたときにYouTubeを埋め込むようにしてみます。
6-1. 単体で埋め込む
■HTML
<div id="sample"></div>
■JavaScript
// IFrame 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);
var ytPlayer;
var youtubeId = 'M7lc1UVf-VE';
function onYouTubeIframeAPIReady() {
// サムネイルの埋め込み
document.getElementById('sample').innerHTML = '<img id="yt-thumb" src="http://i.ytimg.com/vi/' + youtubeId + '/sddefault.jpg">';
// サムネイルクリック時にYouTubeを埋め込むように設定
document.getElementById('yt-thumb').addEventListener('click', function() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: youtubeId, // YouTubeのID
events: {
'onReady': onPlayerReady
}
}
);
});
}
// プレーヤー読み込み後の処理
function onPlayerReady(event) {
event.target.playVideo();
}
サムネイルを埋め込んだ後にクリックイベントを追加して、YouTubeが埋め込まれるようにします。
6-2. 複数埋め込む
複数埋め込む場合も処理自体は単体で埋め込む場合と同じで、for文を使って複数回実行します。
■HTML
<div id="sample"></div> <div id="sample2"></div> <div id="sample3"></div> <div id="sample4"></div>
■JavaScript
// IFrame 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);
// YouTube ID と埋め込むエリア
var youtubeData = [
{
youtubeIid: 'M7lc1UVf-VE',
embedArea: 'sample'
}, {
youtubeIid: 'bHQqvYy5KYo',
embedArea: 'sample2'
}, {
youtubeIid: 'tlcWiP7OLFI',
embedArea: 'sample3'
}, {
youtubeIid: '8OJ7ih8EE7s',
embedArea: 'sample4'
}
];
// サムネイルの埋め込み
function onYouTubeIframeAPIReady() {
for (var i = 0; i < youtubeData.length; i++) {
document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">';
// 埋め込んだサムネイルにイベント追加
embedYoutube(i);
}
}
// YouTubeの埋め込みの準備
var ytPlayer;
function embedYoutube(num) {
// サムネイルクリックでYouTubeを埋め込むようにする
document.getElementById('yt-thumb' + num).addEventListener('click', function() {
ytPlayer = new YT.Player(
youtubeData[num]['embedArea'], // 埋め込む場所の指定
{
width: 640, // プレーヤーの幅
height: 480, // プレーヤーの高さ
videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
events: {
'onReady': onPlayerReady
}
}
);
});
}
// プレーヤー読み込み後の処理
function onPlayerReady(event) {
event.target.playVideo();
}
7. 背景動画にする
ページの背景いっぱいに動画を配置する方法です。
ウインドウのリサイズ時に、動画の比率を維持して拡大・縮小するようにしてみます。
■HTML
.background-coverが動画の前面に覆いかぶさり、背景動画をクリックしても反応しないようにします。
<div class="background-wrap">
<div class="background-movie">
<div id="sample"></div>
</div>
<div class="background-cover"></div>
</div>
■CSS
.background-wrap {
position: fixed;
top: 0;
left: 0;
z-index: -1;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
.background-movie {
position: relative;
}
#sample {
width: 100%;
height: 100%;
}
.background-cover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
■JavaScript
動画の再生処理とは別に、jQueryでリサイズ時に動画の比率を保った状態でのサイズ調整を行っています。(34～75行目)
// IFrame 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);
// YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
videoId: 'M7lc1UVf-VE', // YouTubeのID
playerVars: {
autoplay: 1, // 自動再生の設定
loop: 1, // ループの設定
playlist: 'M7lc1UVf-VE', // 再生する動画のリスト
controls: 0, // コントロールバーを表示しない
showinfo: 0 // 動画情報を表示しない
},
events: {
'onReady': onPlayerReady
}
}
);
}
// プレーヤーの準備ができたとき
function onPlayerReady(event) {
// 動画をミュートにする
event.target.mute();
}
$(function() {
// 背景動画の指定
var bgMovie = $('.background-movie');
// 背景動画のサイズ調整
function background_size_cover(aspectW, aspectH) {
// 画面サイズの取得
var windowWidth = $(window).width();
var windowHeight = $(window).height();
// 画面サイズの比率を引数で設定した比率と比較
if(windowWidth / aspectW * aspectH > windowHeight) {
// 画面の比率が縦長の場合
// 縦横比を保持して、画面を完全に覆う最小サイズと配置位置を取得
var bgWidth = windowWidth;
var bgHeight = Math.floor(bgWidth / aspectW * aspectH);
var bgTop = (windowHeight - bgHeight) / 2;
var bgLeft = 0;
} else {
// 画面の比率が横長の場合
// 縦横比を保持して、画面を完全に覆う最小サイズと配置位置を取得
var bgHeight = windowHeight;
var bgWidth = Math.floor(bgHeight / aspectH * aspectW);
var bgTop = 0;
var bgLeft = (windowWidth - bgWidth) / 2;
}
// 動画のサイズと位置の指定
bgMovie.css({
top: bgTop,
left: bgLeft,
width: bgWidth,
height: bgHeight
})
}
background_size_cover(16, 9);
// リサイズ時に画像調整を実行
$(window).on('resize', function() {
background_size_cover(16, 9);
});
});
動画再生周りの処理はここまでのサンプルで使用したパラメータを使用しています。
動画に音がある場合はミュートにしたいので、onReadyでプレーヤーの準備ができたときにmute()メソッドを使ってミュートにしています。
※スマートフォンなどでは一部対応していないメソッド・パラメータがあります。
詳しくは下記参考サイトの各項目をご確認ください。
【参考サイト】