M3U8 Player iframe Demo

iframe Configuration

Live Preview

Generated iframe Code:

<iframe
  src="/stream"
  width="800px"
  height="450px"
  allowfullscreen
  sandbox="allow-scripts allow-same-origin allow-presentation"
  style="border: 1px solid #ccc; border-radius: 8px;"
></iframe>

iframe Considerations for M3U8 Player:

  • ✅ Video Playback: The HTML5 video element works normally in iframes
  • ✅ HLS.js Loading: External scripts load fine via CDN
  • ⚠️ CORS Issues: Stream URLs must have proper CORS headers
  • ⚠️ Autoplay: May be blocked in iframes without user interaction
  • ⚠️ Fullscreen: Requires both allowfullscreen attribute and proper sandbox permissions
  • 📱 Mobile: Some mobile browsers have additional iframe restrictions

Potential Issues in iframe:

  • Stream CORS: The M3U8 stream URL needs CORS headers allowing the parent domain
  • Autoplay Policy: Browsers may block autoplay in cross-origin iframes
  • Storage Access: localStorage/sessionStorage may be blocked in some browsers
  • Feature Policy: Some features might need explicit permission via allow attributes

Solutions:

  • Same Origin: Host the player on the same domain to avoid most issues
  • CORS Proxy: Use a CORS proxy for streams that don't have proper headers
  • User Interaction: Require user click before autoplay (which your player already does)
  • Sandbox Permissions: Use appropriate sandbox attributes for required features