Internet Exprolerで要素が非表示の状態だとYouTube APIのonReadyイベントが発生しない

display: none;状態の要素にYouTube APIで動画を埋め込む処理を行っていたのですが、Internet ExprolerだとonReadyイベントが発生しないようだったので対応した方法をメモしておきます。

サンプルコード

動画を埋め込む要素を非表示にしておいて、クリックで動画を切り替える処理を実装していました。

HTML

<div id="tab">
	<div id="tab-switch">
		<a href="#movie1">タブ1</a>
		<a href="#movie2">タブ2</a>
		<a href="#movie3">タブ3</a>
	</div>
	<div id="tab-contents">
		<div id="movie1"></div>
		<div id="movie2"></div>
		<div id="movie3"></div>
	</div>
</div>

CSS

#tab {
	width: 640px;
	margin: 0 auto;
}
#tab-switch {
	padding: 20px 0;
}
#movie2,
#movie3 {
	display: none;
}

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 = [
	{
		id: 'bHQqvYy5KYo',
		area: 'movie1'
	}, {
		id: 'bHQqvYy5KYo',
		area: 'movie2'
	}, {
		id: 'bHQqvYy5KYo',
		area: 'movie3'
	}
];

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

// 各プレーヤー準備完了後の処理
function onPlayerReady(e) {
	for (var i = 0; i < ytData.length; i++) {
		if(e.target.getIframe().id == ytData[i]['area']) {
			console.log(ytData[i]['area'] + 'のプレーヤー準備完了しました。');
		}
	}
}

$(function() {
	$('#tab-switch a').on('click', function() {
		$('#tab-contents iframe').hide();
		$($(this).attr('href')).show();
		return false;
	});
});

IE以外だとonReadyのconsoleが3回分表示されたのですが、IEの場合はdisplay: none;でない1つ目のconsoleしか表示されませんでした。
(クリックで動画を切り替えると、onReadyが実行されるようでした。)
IEでonReadyが実行されないデモページ
　

サンプルコード

対応として、display: none;ではなくpositionで動画を重ねて、opacityとz-indexで表示を調整することでonReadyのconsoleが3回分表示されました。

CSS

#tab {
	width: 640px;
	margin: 0 auto;
}
#tab-switch {
	padding: 20px 0;
}
#tab-contents {
	position: relative;
}
#movie1,
#movie2,
#movie3 {
	position: absolute;
}
#movie1 {
	z-index: 2;
}
#movie2,
#movie3 {
	z-index: 1;
	opacity: 0;
}

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 = [
	{
		id: 'bHQqvYy5KYo',
		area: 'movie1'
	}, {
		id: 'bHQqvYy5KYo',
		area: 'movie2'
	}, {
		id: 'bHQqvYy5KYo',
		area: 'movie3'
	}
];

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

// 各プレーヤー準備完了後の処理
function onPlayerReady(e) {
	for (var i = 0; i < ytData.length; i++) {
		if(e.target.getIframe().id == ytData[i]['area']) {
			console.log(ytData[i]['area'] + 'のプレーヤー準備完了しました。');
		}
	}
}

$(function() {
	$('#tab-switch a').on('click', function() {
		$('#tab-contents iframe').css({
			zIndex: 1,
			opacity: 0
		});
		$($(this).attr('href')).css({
			zIndex: 2,
			opacity: 1
		});
		return false;
	});
});

対応後のデモページ