Secure Video Embedding with Strimly: Proxy, CORS, and HLS Tips

Learn how to embed Strimly videos securely using proxy endpoints, correct cross‑origin headers, and a safe iframe policy. This guide covers production‑ready settings that reduce 404s and “refused to connect” errors.

Proxy and CORS

Always pass the HLS playlist via the Strimly proxy: /api/proxy/records/:id/playlist.m3u8. The proxy unifies headers and avoids mixed CORS configurations across CDNs and sites.

Common CORS Policy

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: Range, Origin, Accept, Content-Type
Access-Control-Expose-Headers: Accept-Ranges, Content-Length, Content-Range

Iframe Security

Ensure the player route permits framing and your site’s CSP allows it. Example:

X-Frame-Options: ALLOWALL
Content-Security-Policy: frame-ancestors 'self' https://*.wordpress.com https://*.com https://*.org https://*.net;

HLS Best Practices

• Multiple bitrates for adaptive streaming; include a low rendition for slow networks.
• Segment duration 2–6s; align keyframes across renditions.
• Use a CDN for segments and cache playlists with sensible TTLs.
• Regenerate playlists after re-encoding; validate with mediastreamvalidator.

Debugging Checklist

• Iframe 404: ensure URL-encoding of the playlist param; avoid auto-embed rewriting.
• CORS error: verify proxy headers and that requests hit the proxy, not CDN origin directly.
• Refused to frame: confirm frame-ancestors allows your domain.