Fixed responsivness.

js/h5p.js

@@ -11,6 +11,21 @@ H5P.init = function () {
     H5P.$body = H5P.jQuery('body');
   }
   
+  if (H5P.fullScreenBrowserPrefix === undefined) {
+    if (document.cancelFullScreen) {
+      H5P.fullScreenBrowserPrefix = '';
+    }
+    else if (document.webkitCancelFullScreen) {
+      H5P.fullScreenBrowserPrefix = 'webkit';
+    }
+    else if (document.mozCancelFullScreen) {
+      H5P.fullScreenBrowserPrefix = 'moz';
+    }
+    else if (document.msCancelFullScreen) {
+      H5P.fullScreenBrowserPrefix = 'ms';
+    }
+  }
+  
   H5P.jQuery(".h5p-content").each(function (idx, el) {
     var $el = H5P.jQuery(el);
     var contentId = $el.data('content-id');
@@ -19,7 +34,22 @@ H5P.init = function () {
     
     if (true/* fullscreen */) {
       H5P.jQuery('<div class="h5p-content-controls"><a href="#" class="h5p-enable-fullscreen">Enable fullscreen</a><div>').insertBefore($el).children().click(function () {
-        if (H5P.enableFullScreen($el[0]) === false) {
+        H5P.fullScreen($el, obj);
+        return false;
+      });
+    }
+  });
+};
+
+/**
+ * Enable full screen for the given h5p.
+ * 
+ * @param {jQuery} $el Container
+ * @param {object} obj H5P
+ * @returns {undefined}
+ */
+H5P.fullScreen = function ($el, obj) {
+  if (H5P.fullScreenBrowserPrefix === undefined) {
     // Create semi fullscreen.
     $el.add(H5P.$body).addClass('h5p-semi-fullscreen');
     var $disable = H5P.jQuery('<a href="#" class="h5p-disable-fullscreen">Disable fullscreen</a>').appendTo($el);
@@ -42,30 +72,30 @@ H5P.init = function () {
     $disable.click(disableSemiFullscreen);
     H5P.$body.keyup(keyup);
   }
+  else {
+    var first, eventName = H5P.fullScreenBrowserPrefix + 'fullscreenchange';
+    document.addEventListener(eventName, function () {
+      if (first === undefined) {
+        first = false;
+        return;
+      }
+      $el.add(H5P.$body).removeClass('h5p-fullscreen');
+      document.removeEventListener(eventName, arguments.callee, false);
+    });
+    
+    if (H5P.fullScreenBrowserPrefix === '') {
+      $el[0].requestFullScreen();
+    }
+    else {
+      $el[0][H5P.fullScreenBrowserPrefix + 'RequestFullScreen']();
+    }
+    
+    $el.add(H5P.$body).addClass('h5p-fullscreen');
+  }
+  
   if (obj.resize !== undefined) {
     obj.resize(true);
   }
-        
-        return false;
-      });
-    }
-  });
-};
-
-H5P.enableFullScreen = function (element) { //return false;
-  if (element.requestFullScreen) {
-    return element.requestFullScreen();
-  }
-  if (element.webkitRequestFullScreen) {
-    return element.webkitRequestFullScreen();
-  }
-  if (element.mozRequestFullScreen) {
-    return element.mozRequestFullScreen();
-  }
-  if (element.msRequestFullScreen) {
-    return element.msRequestFullScreen();
-  }
-  return false;
 };
 
 H5P.getContentPath = function(contentId) {