まだ開発段階中らしいけど、chromeの最新とかは使えたりするんでメモ

requestFullscreenってのを叩くとその取得していた要素でモーダルを出してくれる。
これは使い方によってはまぁ使えたりすると思う。

だいぶこういうのは簡単に実装できるので必要かどうかはわからないけど、
余計なプログラム突っ込むよりは全然いいのではないだろうか。

まだ書いた現在ではベンダーを付けなければならないけど、ラクと言えばラクなので今後に期待。

demo

See the Pen GZKPEO by ziyudom (@ziyudom) on CodePen.

webkitRequestFullscreen
とかで判定して、あれば叩く。

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

cssはこんな感じでひっついてるっぽい

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

参考: https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Using_full_screen_mode