fullscreen

by sirfizx

HTML

<button id='fullscreen' >Fullscreen</button>
<iframe id='frame' src='https://justonemorepet.files.wordpress.com/2013/04/dog-sick-300x300.jpg' width='300px' height='300px'/>

JavaScript

var iframe = document.getElementById('frame');

// aggregate fullscreen to one method
iframe.requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
var button = document.getElementById('fullscreen');

// detect fullscreen is supported
if (iframe.requestFullScreen) {
     button.classList.add('available');
     button.addEventListener('click', function() {
         iframe.requestFullScreen();

     }, false);
 }

document.body.addEventListener('fullscreenchange', function(e){
    console.log('full screen change has happened');
});

document.body.addEventListener('mozfullscreenchange', function(e){
    console.log('full screen change has happened');
});

document.body.addEventListener('webkitfullscreenchange', function(e){
    console.log('full screen change has happened');
});

window.addEventListener('msfullscreenchange', function(e){
    console.log('full screen change has happened');
});