Add information about fullscreen iframes to README and demo

kayahr · kayahr · commit ccb363d83725 · 2012-12-23T12:58:37.000+01:00
diff --git a/README.md b/README.md
@@ -69,3 +69,12 @@ document. Example:
     $(document).bind("fullscreenerror", function() {
         alert("Browser rejected fullscreen change");
     });
+
+
+### Fullscreen iframe
+
+Entering fullscreen mode from within an iframe is not allowed by default but
+it can be enabled with a few attributes on the iframe:
+
+    <iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
+    </iframe>
diff --git a/demo/iframe.html b/demo/iframe.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Test iframe</title>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+    <script type="text/javascript" src="../jquery.fullscreen-min.js"></script>
+  </head>
+  <body style="background:white">
+    <button onclick="$(document).fullScreen(true)">Enter Fullscreen mode from iframe</button>
+    <button onclick="$(document).fullScreen(false)">Exit Fullscreen mode</button>
+  </body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -42,12 +42,14 @@ <h1>jQuery Fullscreen Plugin demo</h1>
       <button onclick="$(document).toggleFullScreen()">Toggle Fullscreen mode (Document)</button><br />
       <button onclick="alert($(document).fullScreen())">Query Fullscreen mode</button>
     </div>
+    <iframe src="iframe.html" width="512" height="100" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
+    </iframe>
     <p class="fullscreen-supported">
       Browser supports fullscreen mode.
     </p>
     <p class="fullscreen-not-supported">
       Browser does not support fullscreen mode.    
-    </p>
+    </p>    
     <p id="status"></p>
       
   </body>
