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. This article is about a simpler publishing path for many site owners: embedding a ready-made player page.
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.
For an M3U8 player, that means you can host the player on one page and place it inside another site without rebuilding the player UI every time.
Test the stream before you embed it
This step saves time. If the stream itself does not work, embedding it will not fix anything.
- 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. The useful follow-up pages are How to Test HLS Streams in Your Browser and M3U8 Not Playing? 8 Common Fixes.
A simple iframe embed example
After you know the stream works, you can embed the player page in HTML like this:
<iframe
src="https://www.liveplayer.org/?source=YOUR_M3U8_URL"
width="100%"
height="500"
frameborder="0"
allowfullscreen>
</iframe>Replace YOUR_M3U8_URL with the encoded stream URL you want to test or publish.
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 iframe may load, but the media still may not play. Two causes show up often.
- 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. Browsers can block or change the way insecure media loads inside secure pages.
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. In that case, you may want a custom player page or direct HLS integration in your app.
The hls.js project is a common reference when you need to handle HLS playback in browsers that do not have built-in HLS support.
A small habit that helps
Keep one test page and one production page. Test the stream in the player page first. Then place it in the production page. This makes it easier to tell whether a failure comes from the stream or from the page that contains it.
If you want to generate code instead of writing it by hand, use Customize Player. If you want to check the stream before embedding, go back to LivePlayer.