full screen video

by Berat Emre Nebioğlu

HTML

<video id="my-video" width="950" height="534" controls="controls" preload="preload" poster="http://www.globalonenessproject.org/sites/default/files/player-still/laugh-clown-laugh-alt6_0.jpg">
  <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
  <source type="video/mp4" src="http://media.globalonenessproject.org/videos/mp4/laugh-clown-laugh-sd.mp4" />
  <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
  <source type="video/webm" src="http://media.globalonenessproject.org/videos/webm/laugh-clown-laugh-sd.webm" />
  <!-- Ogg/Vorbis for older Firefox and Opera versions -->
  <source type="video/ogg" src="http://media.globalonenessproject.org/videos/ogg/laugh-clown-laugh-sd.ogv" />
</video>

JavaScript

$('video#my-video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});