Quick path: test the M3U8 URL in LivePlayer, then embed a working player page with an iframe. Or generate the snippet in the Embed Builder.
After an M3U8 link plays in the browser, the next task is often putting that stream on a web page. In many cases, an iframe is enough. In other cases, you may want to build your own player page.
Apple documents that one simple way to deliver HLS in a browser is to use a web page with a video element and an M3U8 source. Their page is here: Deploying a Basic HTTP Live Streaming Stream.
What an iframe actually does
An iframe loads another HTML page inside your page. MDN describes the iframe element here: <iframe>: The Inline Frame element.
1. Test the stream before you embed it
- Open the M3U8 link in LivePlayer.
- Check whether playback starts.
- Leave it running for a short time.
- Confirm audio, video, and fullscreen all behave normally.
If the stream fails here, go fix the stream first with How to Test HLS Streams in Your Browser or M3U8 Not Playing? 8 Common Fixes.
2. A simple iframe embed example
After you know the stream works, embed the player page like this:
<iframe
src="https://www.liveplayer.org/?url=YOUR_ENCODED_M3U8_URL"
width="100%"
height="500"
frameborder="0"
allowfullscreen>
</iframe>Replace YOUR_ENCODED_M3U8_URL with the URL-encoded stream address. The player reads the url query parameter.
3. What to check after embedding
- Does the page load inside the iframe?
- Does the stream start?
- Does fullscreen work the way you expect?
- Does the player area fit on mobile screens?
- Does the source URL stay valid over time?
Two common causes of embed failure
- The stream URL is blocked in the browser. This can happen because of CORS policy, expired links, or private segment URLs.
- The page is HTTPS but the stream is HTTP. MDN explains mixed content here: Mixed content.
When an iframe is enough
An iframe works well when you want a simple player on a marketing page, docs page, support page, or dashboard. It is also useful when you do not want to maintain player code inside every project.
When you may need something else
If you need deeper control over analytics, authentication, custom controls, or page styling, an iframe may not be the final setup. The hls.js project is a common reference when you need direct HLS integration.
Ready to publish? Use Customize Player to generate code, or go back to LivePlayer to re-test the stream.