Native Fullscreen Video

1Built-in Fullscreen Video#

Your generated app already supports native fullscreen video playback. When a user taps the fullscreen button on an HTML5 <video> element, the app:

• Enters true immersive fullscreen
• Auto-rotates to landscape automatically
• Hides all navigation bars
• Restores portrait orientation when the user exits fullscreen

No configuration needed - this works automatically! The orientation lock is managed by the app, so even apps configured to portrait-only will correctly go landscape during video playback.

2Supported Video Sources#

The following video types work with fullscreen:

✅ HTML5 <video> elements
✅ YouTube embeds (iframe)
✅ Vimeo embeds
✅ Self-hosted MP4/WebM videos
✅ HLS streams (.m3u8)

⚠️ Some DRM-protected content may not enter native fullscreen

3Website Video Best Practices#

For the best video experience in your generated app:

<!-- Good: Standard HTML5 video -->
<video controls playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Good: YouTube embed -->
<iframe
  src="https://youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

<!-- Tip: Add 'playsinline' attribute
     for inline playback on iOS too -->

4Combine with PiP#

For the ultimate video experience, enable both Fullscreen Video (built-in) and PiP mode:

1. User watches video inline
2. Taps fullscreen → enters immersive landscape
3. Taps back → returns to normal view
4. Presses home → enters PiP floating window

This gives your users a YouTube-like experience in your web app!