Web Presentations Fullscreen button

POC. Try to embed this Fiddle's result in various pages and see if fullscreen works like it should

HTML

<div class="Section">
<h1>My awesome Slideshow</h1>
<h2>Could be made with the html5rocks slideshow, CSSS, WebSlider, whatever</h2>
<img src="http://lorempixum.com/600/400/">
</div>

CSS

body {font-family: Calibri, sans-serif;}
.Section {border: 1px solid #ccc; background: #EEE; text-align: center; font-size: 20px;}

img {width: 90%; text-align: center;}

.embedControls{background: #eee; font-weight: bold; list-style: none;}
.embedControls li {float: right;}

JavaScript

// consoledummy.js
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();)b[a]=b[a]||c})(window.console=window.console||{});


(function($){
    var $controls = $('<ul class="embedControls"> \
                          <li class="fullscreenBtn"><a href="#">Fullscreen</a></li>\
                      </ul>');
    
    window.injectControls = function(){
        $('body').append($controls);
    };
    
    var goFullscreen = function(){
        console.log('goFullscreen');
    };
    
    var exitFullscreen = function(){
        console.log('exitFullscreen');
    };
    
    
   $('a', $controls).toggle(goFullscreen, exitFullscreen);
})(jQuery);



injectControls();