diff --git a/web/css/main.css b/web/css/main.css
index b47047fb..10d98e2e 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -3,6 +3,12 @@
     src: url('/fonts/6809-Chargen.woff2');
 }
 
+
+.no-media-controls::-webkit-media-controls {
+    display: none !important;
+}
+
+
 html {
     /* force full size for Firefox */
     width: 100%;
diff --git a/web/index.html b/web/index.html
index bc673e5e..a760c3fc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -37,7 +37,7 @@
             There is still audio because current audio flow is not from media but it is manually encoded (technical webRTC challenge). Later, when we can integrate audio to media, we can face the issue with mute again .
             https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
         -->
-        <video id="stream" class="game-screen" hidden muted playsinline preload="none"></video>
+        <video id="stream" class="game-screen" hidden muted preload="none"></video>
 
         <div id="menu-screen">
             <div id="menu-container"></div>
@@ -127,7 +127,7 @@
 <script src="js/env.js?v=5"></script>
 <script src="js/input/input.js?v=3"></script>
 <script src="js/gameList.js?v=3"></script>
-<script src="js/stream/stream.js?v=4"></script>
+<script src="js/stream/stream.js?v=5"></script>
 <script src="js/room.js?v=3"></script>
 <script src="js/network/ajax.js?v=3"></script>
 <script src="js/network/socket.js?v=4"></script>
diff --git a/web/js/stream/stream.js b/web/js/stream/stream.js
index 5652b36e..e1a0ef4b 100644
--- a/web/js/stream/stream.js
+++ b/web/js/stream/stream.js
@@ -18,7 +18,7 @@ const stream = (() => {
                 timerId: null,
                 w: 0,
                 h: 0,
-                aspect: 4/3
+                aspect: 4 / 3
             };
 
         const mute = (mute) => screen.muted = mute
@@ -88,22 +88,33 @@ const stream = (() => {
         screen.addEventListener('fullscreenchange', () => {
             const fullscreen = document.fullscreenElement
 
+            const w = window.screen.width ?? window.innerWidth;
+            const h = window.screen.height ?? window.innerHeight;
+
+            const ww = document.documentElement.innerWidth;
+            const hh = document.documentElement.innerHeight;
 
             screen.style.padding = '0'
             if (fullscreen) {
-                const dw = (window.innerWidth - fullscreen.clientHeight * state.aspect) / 2
+                const dw = (w - ww * state.aspect) / 2
                 screen.style.padding = `0 ${dw}px`
                 // chrome bug
                 setTimeout(() => {
-                    const dw = (window.innerHeight - fullscreen.clientHeight * state.aspect) / 2
+                    const dw = (h - hh * state.aspect) / 2
                     screen.style.padding = `0 ${dw}px`
                 }, 1)
+                makeFullscreen(true);
+            } else {
+                makeFullscreen(false);
             }
 
             // !to flipped
-
         })
 
+        const makeFullscreen = (make = false) => {
+            screen.classList.toggle('no-media-controls', make)
+        }
+
         const useCustomScreen = (use) => {
             if (use) {
                 if (screen.paused || screen.ended) return;
@@ -170,9 +181,7 @@ const stream = (() => {
 
             const a2 = w / h
 
-            const attr = a.toFixed(6) !== a2.toFixed(6) ? 'fill' : fit
-            state.screen.style['object-fit'] = attr
-
+            state.screen.style['object-fit'] = a.toFixed(6) !== a2.toFixed(6) ? 'fill' : fit
             state.h = payload.h
             state.w = Math.floor(payload.h * payload.a)
             // payload.a > 0 && (state.aspect = payload.a)