Add onclick fullscreen for HDR testing

jasonycw · Mar 26, 2024 · f1b0503 · f1b0503
1 parent 6f26fb2
commit f1b0503
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/HDR/blue/index.html b/HDR/blue/index.html
@@ -15,8 +15,17 @@
     <title>HDR blue</title>
 </head>
 
-<body>
+<body style="display: block;min-width: 100%;min-height: 100%;position: absolute;">
     <!-- https://mastodon.social/@tb_99999@threads.net/112151078446565188 -->
+    <script>
+        document.getElementsByTagName('body')[0].addEventListener('click', () => {
+            try {
+                document.documentElement.requestFullscreen();
+            } catch (err) {
+                document.documentElement.webkitRequestFullScreen();
+            }
+        });
+    </script>
 </body>
 
 </html>
diff --git a/HDR/green/index.html b/HDR/green/index.html
@@ -15,8 +15,17 @@
     <title>HDR green</title>
 </head>
 
-<body>
+<body style="display: block;min-width: 100%;min-height: 100%;position: absolute;">
     <!-- https://mastodon.social/@tb_99999@threads.net/112151078446565188 -->
+    <script>
+        document.getElementsByTagName('body')[0].addEventListener('click', () => {
+            try {
+                document.documentElement.requestFullscreen();
+            } catch (err) {
+                document.documentElement.webkitRequestFullScreen();
+            }
+        });
+    </script>
 </body>
 
 </html>
diff --git a/HDR/red/index.html b/HDR/red/index.html
@@ -15,8 +15,17 @@
     <title>HDR red</title>
 </head>
 
-<body>
+<body style="display: block;min-width: 100%;min-height: 100%;position: absolute;">
     <!-- https://mastodon.social/@tb_99999@threads.net/112151078446565188 -->
+    <script>
+        document.getElementsByTagName('body')[0].addEventListener('click', () => {
+            try {
+                document.documentElement.requestFullscreen();
+            } catch (err) {
+                document.documentElement.webkitRequestFullScreen();
+            }
+        });
+    </script>
 </body>
 
 </html>
diff --git a/HDR/white/index.html b/HDR/white/index.html
@@ -7,13 +7,23 @@
     <title>HDR white</title>
 </head>
 
-<body>
+<body style="margin: 0px; overflow: hidden;">
     <!-- https://github.com/kiding/wanna-see-a-whiter-white/blob/gh-pages/src/index.html -->
-    <video width="100%" height="100%" preload="auto" autoplay loop muted class="w-full h-1" title="HDR White">
+    <video style="overflow: hidden;" min-width="100%" min-height="100%" preload="auto" autoplay loop muted
+        class="w-full h-1" title="HDR White">
         <source src="./white.webm" type="video/webm" />
         <source src="./white1.mp4" type="video/mp4" />
         <source src="./white2.mp4" type="video/mp4" />
     </video>
+    <script>
+        document.getElementsByTagName('body')[0].addEventListener('click', () => {
+            try {
+                document.documentElement.requestFullscreen();
+            } catch (err) {
+                document.documentElement.webkitRequestFullScreen();
+            }
+        });
+    </script>
 </body>
 
 </html>