W3G

任意の要素をフルスクリーンで開く

document.getElementById("sample").requestFullScreen(); //HTML5 Fullscreen API仕様
document.getElementById("sample").webkitRequestFullscreen(); //Chrome, Safari, Opera
document.getElementById("sample").mozRequestFullScreen(); //Firefox
document.getElementById("sample").msRequestFullscreen(); //IE

フルスクリーン表示にしたい要素（動画、画像または他の要素）をrequestFullScreen()メソッドで呼び出します。それぞれベンダー識別子が必要です。

video要素が対象の場合は自動的に縦横のサイズが拡げられますが、他の要素の場合は元のサイズが維持される（Firefoxでは自動的にwidth:100%; height:100%;が追加される）ので、フルスクリーン状態の要素にのみ適用できる:fullscreen擬似クラスを用いて整えます。

なお、requestFullScreen()メソッドはボタンのクリックなど、ユーザが発生させるイベントから呼び出す必要があります。ページを開くと同時にrequestFullScreen()メソッドを実行しても、信頼できないコンテンツとしてブロックされることになります。

フルスクリーンの終了

Escキーを押すことで、ユーザは全画面表示モードを終了できます。プログラムの制御下で全画面表示を終了するには、exitFullscreenメソッドを使います。なお、HTML5仕様のメソッド名はexitFullscreenですが、Gecko:FullScreenAPI仕様ではcancelFullScreenになっています。Firefox, Chrome, Safari, OperaはGecko:FullScreenAPIをベースにした実装であるため、ベンダー識別子をつける際にHTML5仕様のメソッド名と異なることに注意してください。

document.exitFullscreen(); //HTML5 Fullscreen API仕様
document.cancelFullScreen(); //Gecko:FullScreenAPI仕様
document.webkitCancelFullScreen(); //Chrome, Safari, Opera
document.mozCancelFullScreen(); //Firefox
document.msExitFullscreen(); //IE

exitFullscreenメソッドはdocumentオブジェクトに適用させることで、どの要素が現在フルスクリーンモードで開かれていても問題はありません。

フルスクリーン表示の要素を取得

現在、フルスクリーン表示になっている要素を取得するには、documentオブジェクトのfullscreenElementプロパティを使うことで、フルスクリーンで表示されている最上位の要素を返します。フルスクリーンで表示している要素がなければnullを返します。それぞれベンダー識別子が必要です。

function getFSelment() {
	if (document.webkitFullscreenElement) {
		return document.webkitFullscreenElement;
	} else if (document.mozFullScreenElement) {
		return document.mozFullScreenElement;
	} else if (document.msFullscreenElement) {
		return document.msFullscreenElement;
	} else if (document.fullscreenElement) {
		return document.fullscreenElement;
	}
}

フルスクリーンイベントを検知する

fullscreenchangeイベントを用います。それぞれベンダー識別子が必要です。フルスクリーン表示になった時と、フルスクリーン表示を終了したときにもイベントが呼び出されます。どちらのイベントかを判断するには、フルスクリーンで表示している要素がなければnullを返すfullscreenElementプロパティを用いると良いでしょう。

document.addEventListener("webkitfullscreenchange", handleFSevent, false);
document.addEventListener("mozfullscreenchange", handleFSevent, false);
document.addEventListener("MSFullscreenChange", handleFSevent, false);
document.addEventListener("fullscreenchange", handleFSevent, false);
function handleFSevent() {
	if( (document.webkitFullscreenElement && document.webkitFullscreenElement !== null)
	 || (document.mozFullScreenElement && document.mozFullScreenElement !== null)
	 || (document.msFullscreenElement && document.msFullscreenElement !== null)
	 || (document.fullScreenElement && document.fullScreenElement !== null) ) {
		alert("フルスクリーン表示を実行しました。");
	}else{
		alert("フルスクリーン表示を終了しました。");	
	}
}

フルスクリーン状態の要素にCSSを適用する

:fullscreen擬似クラスを用います。それぞれベンダー識別子が必要です。

#target:-webkit-full-screen{
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:-moz-full-screen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:-ms-fullscreen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:fullscreen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}