Add “Rotate Screen” Message

This guide explains how to show a full-screen message prompting users to rotate their device. The message automatically hides when the device is in landscape mode. It works on all devices (mobile, tablet, desktop).

Follow the steps below:

Step 1: Update message.js

1. Open your message.js file.

2. Add the following function outside the messageHandler function:

function handleRotationChange() {
  const overlay = document.getElementById("rotateOverlay");

  if (!overlay) return;

  // If device is in landscape, hide the message
  if (window.innerWidth > window.innerHeight) {
    overlay.style.display = "none";
  } else {
    overlay.style.display = "flex";
  }
}

// Listen for rotation & resize (desktop + mobile)
window.addEventListener("orientationchange", handleRotationChange);
window.addEventListener("resize", handleRotationChange);

3. Inside the messageHandler function, locate the case "stage4_playBtnShowedUp": block.
   Add the following lines to show the overlay and immediately check orientation:

document.getElementById("rotateOverlay").style.display = "flex";
handleRotationChange(); // immediately check orientation

4. Inside the messageHandler function, locate the case "stage5_playBtnPressed": block.
   Add the following lines to hide the screen rotation message

document.getElementById("rotateOverlay").style.display = "none";

Step 2: Add CSS Styles

Add the following CSS to your style.css file or inside a <style> block in your HTML:

#rotateOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: none;            /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.rotateMessage {
  color: #ffffff;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}

Notes:

• z-index: 99999 ensures the overlay covers the iframe and all other elements.

• The overlay is hidden by default (display: none) and will only appear when needed.

Step 3: Add the Overlay HTML

Place the following <div> just before the closing </body> tag in your HTML file:

<div id="rotateOverlay">
  <div class="rotateMessage">
    🔄 Rotate the screen  // add your customized message here
  </div>
</div>

Notes:

• Placing it outside any modal ensures it always appears above the iframe.

• The rotateMessage div contains the icon/text that will be shown to users.

Behavior After Setup

1. When the Play button appears (stage4_playBtnShowedUp), the “Rotate the screen” overlay will appear.

2. If the device is already in landscape, the overlay will be hidden automatically.

3. The overlay automatically updates when the device orientation changes.

4. Once streaming starts (stage5_playBtnPressed), the overlay is automatically hidden if not already.

Note: This setup is provided for demo purposes. You can customize the message, icon, text, or styling as per your app’s requirements.

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube