全屏

全屏

var elem = document.getElementById("myvideo");
elem.addEventListener('click',function () {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
});

显示差异

Gecko和WebKit的实现存在关键差异: 
Gecko 自动为元素添加了CSS规则，使其拉伸以填满屏幕。
WebKit将全屏元素居中，并以同样的大小显示，而屏幕的其他部分为黑色。

全屏请求失败

- 并不保证你总是可以进入全屏模式。例如 <iframe>元素具有allowfullscreen属性，可选择是否将其内容以全屏模式显示。
- 另外，几种特定的内容，比如窗体插件，不能以全屏模式显示。
- 尝试将不能以全屏模式显示的元素全屏显示是无效的。而要求全屏显示的元素会收到一个 mozfullscreenerror 事件。当全屏请求失败时，Firefox 会在Web控制台上记录一条错误信息解释请求为什么失败。但是在 Chrome 和新版的 Opera中，不会生成这样的警告。