---
title: "HTML5 Fullscreen video crossbrowser"
description: "With the evolution of HTML5 APIs taking a video to Fullscreen and back is very easy and indeed no flash! P.S : I shall be."
url: "https://h3manth.com/scribe/html5-fullscreen-video-crossbrowser/"
canonical_url: "https://h3manth.com/scribe/html5-fullscreen-video-crossbrowser/"
markdown_url: "https://h3manth.com/scribe/blog/html5-fullscreen-video-crossbrowser.md"
publishDate: "2012-08-25T00:00:00.000Z"
author: "Hemanth HM"
category: "javascript"
tags: ["javascript","html5"]
word_count: 198
reading_time_minutes: 1
x_markdown_tokens: 492
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# HTML5 Fullscreen video crossbrowser

> With the evolution of HTML5 APIs taking a video to Fullscreen and back is very easy and indeed no flash! P.S : I shall be.

With the evolution of HTML5 APIs taking a video to Fullscreen and back is very easy and indeed no flash! 

P.S : I shall be using webm for the demo, the below image and explanations must make things clear on why webm.

![webm]( http://h3manth.com/demo/fullscreen/cmp.png "webm")

__Why webm? :__

It gives : 

* VP8, a high-quality video codec we are releasing today under a BSD-style, royalty-free license

* Vorbis, an already open source and broadly implemented audio codec.

* Container format based on a subset of the Matroska media container.
   
Benefits ? : 

* It supports very high quality video viewing.

 * Enables great video playback performance, even on older computers.

 * It is completely free and open to everyone platform.

 * Supported on popular video sites like YouTube and so on.

__THE CODE :__  [ webkit, v8 and spidermonkey ]

```javascript
var videoElement = document.getElementById("myvideo");
    
  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }
  
  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);
```

Feel free to check out [DEMO](http://h3manth.com/demo/fullscreen/webm.html) and comment below!