YouTubeを複数配置したページで、全画面モードから戻るとページの位置がずれている

YouTubeをAPIを使って多数配置ときに、下の方にあるYouTubeを全画面モードにしてから戻るとページの位置がずれているときがありました。

サンプルコード

最初にやろうとしていたコードです。

HTML

<div id="contents"></div>

CSS

#contents {
	padding-bottom: 300px;
}
#list {
	width: 640px;
	margin: 0 auto;
}
#list li {
	margin: 80px auto;
}

JavaScript

YouTubeを埋め込むエリアを作成して、その中にAPIを使ってYouTubeを埋め込みます。

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 ytWidth = 640;
var ytHeight = 390;
var ytData = [
	'ZDqeCyUwnO8',
	'KN9Go6ZeGiQ',
	'f5Sy_ld8MHA',
	'QtG2ZMvJNZo',
	'JpEaUKQVE00',
	'WOy3WbcbNtQ',
	'MG9tWDy6Hmc',
	'rblaPG33Hnk',
	'qYrOgbgX69M',
	'BeHvEt1vASE'
];

// YouTube埋め込みエリアの作成
var insert = '<ul id="list">';
for (var i = 0; i < ytData.length; i++) {
	insert += '<li>';
	insert += '<div id="movie' + i + '"></div>';
	insert += '</li>';
};
insert += '</ul>';
document.getElementById('contents').innerHTML = insert;

// 各プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < ytData.length; i++) {
		ytPlayer[i] = new YT.Player(('movie' + i), {
			width: ytWidth,
			height: ytHeight,
			videoId: ytData[i]
		});
	}
}

通常の埋め込みのデモページ
　

デモページ一番下のYouTubeを再生後、右下にある全画面ボタンをクリックします。

全画面モードに変更後、右下のボタンで全画面モードを終了します。

元の画面に戻ると、今見ていたYouTubeが下の方に移動してしまっています。

今回の場合は一部見えているのでまだいいですが、場合によっては再生しているYouTubeが完全に画面外になってしまうこともありました。
　

対応方法

YouTube埋め込み後に、#listに対してmin-heightで高さを指定すると対応できました。

JavaScript

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 ytWidth = 640;
var ytHeight = 390;
var ytData = [
	'ZDqeCyUwnO8',
	'KN9Go6ZeGiQ',
	'f5Sy_ld8MHA',
	'QtG2ZMvJNZo',
	'JpEaUKQVE00',
	'WOy3WbcbNtQ',
	'MG9tWDy6Hmc',
	'rblaPG33Hnk',
	'qYrOgbgX69M',
	'BeHvEt1vASE'
];

// YouTube埋め込みエリアの作成
var insert = '<ul id="list">';
for (var i = 0; i < ytData.length; i++) {
	insert += '<li>';
	insert += '<div id="movie' + i + '"></div>';
	insert += '</li>';
};
insert += '</ul>';
document.getElementById('contents').innerHTML = insert;

// 各プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < ytData.length; i++) {
		ytPlayer[i] = new YT.Player(('movie' + i), {
			width: ytWidth,
			height: ytHeight,
			videoId: ytData[i]
		});
	}
	document.getElementById('list').style.minHeight = document.getElementById('list').clientHeight + 'px';
}

対応後のデモページ
　

先ほどと同じように全画面モードに変更します。

右下のボタンから全画面モードを終了します。

元の画面に戻っても、YouTubeが全画面モード変更前の位置にあるようになりました。

原因はよく分かりませんが、全体を覆っている要素に高さを指定しておかないと、全画面モードから戻った時にずれることがあるみたいです。