Generate responsive embed code for your own M3U8 (HLS) streams. Customize player settings, preview live, and get production-ready code for iframe, React, Vue, WordPress, and more.
Enter a URL and preview will appear here
Choose your platform and copy the code below. All options are automatically applied.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Each setting in the generator controls a specific aspect of your embedded player. Here's what they do.
The full URL to your HLS stream. This can be a master playlist (with multiple bitrates) or a media playlist (single bitrate). The player will load the stream from this address.
A static image displayed before the video starts playing. Use a 16:9 image for the best visual result. Supported formats: JPEG, PNG, WebP.
Used for the title attribute on the iframe and for accessibility. This helps screen readers
and users understand what the embedded player contains.
Sets the base dimensions of the player. When responsive mode is enabled, these values act as maximum dimensions and the player scales proportionally.
Defines the visual shape of the player. The most common is 16:9 (widescreen), but you can choose 4:3 (standard), 1:1 (square), 9:16 (vertical), or 21:9 (ultrawide) depending on your content.
When enabled, the player automatically scales to fit its container while maintaining the aspect ratio. This is essential for mobile devices and different screen sizes.
Attempts to start playback immediately when the page loads. Note that modern browsers often block autoplay with sound. Use the Muted option to increase autoplay success.
Starts the video with audio muted. This is required for autoplay to work in most browsers and improves the user experience on mobile devices.
Replays the video automatically when it ends. Useful for background videos, advertisements, or short clips.
Shows or hides the player controls (play, pause, volume, progress bar, etc.). Hiding controls is sometimes used for background videos or immersive experiences.
Enables or disables the fullscreen button. Fullscreen is a key feature for video players and should generally be enabled.
Allows the user to pop the video out into a floating window that stays on top of other content. Supported in most modern browsers.
Enables keyboard shortcuts for the player (space to play/pause, arrow keys to seek, etc.). Essential for accessibility.
Controls how much of the video is preloaded before playback: Auto — loads the entire video; Metadata — loads only metadata (duration, dimensions); None — no preloading.
Defers loading of the iframe until it is near the viewport. Improves initial page load performance, especially on pages with multiple embeds.
Controls what referrer information is sent with requests from the iframe. Useful for privacy or for streams that require referrer validation.
An embed player is a video player that you can place on your own website by copying and pasting a small piece of code. The player loads content from an external source (like your streaming server) and displays it within your page.
The most common way to embed a player is using an iframe (inline frame). An iframe is an HTML element that loads another web page or content within your own page. This creates a "window" into the player that is isolated from the rest of your page's code, which improves security and reliability.
Embedding a video player offers several advantages:
The HTML5 <video> element is the native way to play video in
browsers. However, it has limited features and inconsistent HLS support across browsers.
Video.js is a JavaScript library that enhances the HTML5 video element with
consistent controls, HLS support (via the built-in VHS plugin), accessibility, and a rich
customization API.
This generator uses Video.js with its built-in VHS (Video.js HTTP Streaming) plugin to provide a robust, feature-rich player that works consistently across all modern browsers — without the need for a separate HLS plugin.
The embed code generated by this tool loads Video.js from a CDN. The player uses the built-in VHS plugin to fetch your stream URL and play it. All playback happens in the user's browser — we do not host or cache any video content.
Making your embedded player responsive ensures it looks great on any device — from smartphones to desktop monitors.
The most reliable method for responsive embeds is the padding-bottom technique. This uses CSS padding to create a container with a fixed aspect ratio, then positions the iframe absolutely inside it.
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="YOUR_EMBED_URL"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0" allowfullscreen loading="lazy"></iframe>
</div>
padding-bottom: 56.25% (standard widescreen)padding-bottom: 75% (standard screen)padding-bottom: 100% (square)padding-bottom: 177.78% (vertical / TikTok)padding-bottom: 42.86% (ultrawide)For modern browsers that support the aspect-ratio property, you can use this cleaner
approach:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-container iframe {
width: 100%;
height: 100%;
}
Always design for mobile first. Use max-width: 100% on the container and ensure the iframe
scales down gracefully. Test your embeds on different screen sizes using browser developer tools.
Always include loading="lazy" on your iframes to improve page load performance,
especially when embedding multiple players on the same page.
Follow these guidelines to ensure your embedded players work reliably and provide a great user experience.
application/vnd.apple.mpegurl) and TS segments
(video/MP2T).title attribute on
iframes for screen reader users.width: 100%) for
responsive embeds. Avoid fixed pixel widths unless necessary.Forgetting to set the allowfullscreen attribute on iframes prevents users from
going fullscreen. Always include it!
Video accessibility is essential for reaching all users, including those with disabilities. This embed generator includes accessibility features by default.
All player controls are keyboard-accessible. Users can use the Tab key to navigate, Space/Enter to play/pause, and arrow keys to seek. The Keyboard Controls option enables this functionality.
Video.js includes ARIA labels that make the player understandable to screen readers. The
Player Title field is used as the iframe's title attribute, providing
context to screen reader users.
While the generator does not include a caption upload interface, the Video.js player fully supports
WebVTT captions. You can add them by including a <track> element in the HTML.
Video.js uses a default skin with good contrast ratios. The controls are designed to be visible against varying video content.
Video.js provides visible focus indicators for keyboard users, making it easy to see which control is currently selected.
We believe video should be accessible to everyone. That's why we use Video.js, which is built with accessibility in mind. Always test your embeds with keyboard navigation and a screen reader.
Understanding security considerations when embedding video players helps protect your website and your users.
Always serve both your website and the embedded player over HTTPS. This prevents man-in-the-middle attacks and ensures that stream data remains confidential.
If your page is served over HTTPS, all resources (including the stream URL) must also be served over HTTPS. Browsers block mixed content (HTTP resources on HTTPS pages), which can break your player.
Cross-Origin Resource Sharing (CORS) errors occur when the stream server does not include the
necessary Access-Control-Allow-Origin header. To fix this, configure your server to
allow requests from your domain or use a proxy.
The referrerpolicy attribute controls what referrer information is sent with requests
from the iframe. This can be important for privacy and for streams that validate the referrer.
Iframes are sandboxed by default, which means they cannot access the parent page's DOM or JavaScript. This provides security by isolating the player from your site's code.
If your site uses CSP, you may need to add the stream server's domain to the connect-src
directive to allow the player to fetch segments.
Some servers set X-Frame-Options: DENY or SAMEORIGIN, which prevents the
player from being embedded. If you control the server, set it to allow embedding.
PlayAnyM3U8 does not host or store any video content. All streams are played directly from the original source. Your stream URLs are never saved on our servers.
If your embed isn't working as expected, check the following common issues.
Symptom: Player shows error, console shows 404.
Cause: The URL is incorrect or the stream has been removed.
Solution: Verify the URL, check for typos, and ensure the stream is still active.
Symptom: Access denied error.
Cause: Server blocks requests (referer restrictions, IP blocking, or expired tokens).
Solution: Check if the stream requires authentication or a specific referer. Contact the stream provider.
Symptom: Console shows "No 'Access-Control-Allow-Origin' header".
Cause: The server does not include the necessary CORS headers.
Solution: Configure your server to include
Access-Control-Allow-Origin: * or your specific domain.
Symptom: Player blocked due to HTTP content on HTTPS page.
Cause: The M3U8 URL uses HTTP while the page is served over HTTPS.
Solution: Use HTTPS for your stream URLs, or load the page over HTTP if security is not critical.
Symptom: The iframe area is empty with no error.
Cause: The embed URL is invalid, or the player failed to load.
Solution: Check the embed URL in your browser directly. Ensure the stream URL is accessible.
Symptom: The video does not start playing automatically.
Cause: Modern browsers block autoplay with sound.
Solution: Enable the Muted option for autoplay. Also ensure the user has interacted with the page.
Symptom: The poster image does not appear.
Cause: The URL is incorrect, or the image format is not supported.
Solution: Verify the poster URL. Use JPEG, PNG, or WebP format. Ensure the image is accessible.
Symptom: The fullscreen button is missing or does not work.
Cause: The allowfullscreen attribute is missing
from the iframe.
Solution: Add allowfullscreen to your iframe.
The generator includes it by default.
Symptom: Video plays but no audio (or vice versa), or error about unsupported codec.
Cause: The codec used (e.g., H.265) is not supported by the browser.
Solution: Use widely supported codecs like H.264 for video and AAC for audio.
Symptom: Player fails to load with a playlist parsing error.
Cause: The M3U8 file is malformed or uses unsupported tags.
Solution: Validate your M3U8 file using a validator tool. Ensure it is correctly formatted.
Symptom: Player shows a decryption error or black screen.
Cause: The stream uses DRM (Widevine, FairPlay, PlayReady) that is not supported by the player.
Solution: Use a player that supports the specific DRM system, or test with non-DRM streams.
Symptom: Stream plays briefly then stops with 403 errors.
Cause: The URL includes a time-limited token that has expired.
Solution: Refresh the URL to obtain a new token, or use a long-lived test URL.
Symptom: Player shows a loading spinner indefinitely or a timeout error.
Cause: The server is slow to respond, or the network connection is poor.
Solution: Check your network connection. If the problem persists, try a different server or CDN.
The embed generator produces code that works on all modern browsers. Here's the detailed compatibility table.
| Browser | Video.js | HLS Playback | Responsive | Fullscreen | PiP | Keyboard |
|---|---|---|---|---|---|---|
| Chrome 90+ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Firefox 88+ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Safari 14+ | ✓ | ✓ (native) | ✓ | ✓ | ✓ | ✓ |
| Edge 90+ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Android Chrome | ✓ | ✓ | ✓ | ✓ | ◐ | ✓ |
| iOS Safari | ✓ | ✓ (native) | ✓ | ✓ | ◐ | ✓ |
| Samsung Internet | ✓ | ✓ | ✓ | ✓ | ◐ | ✓ |
| Opera 76+ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
✓ Full support | ◐ Partial support | ✗ Not supported
Note: Native HLS support varies. Video.js with VHS ensures consistent playback across all browsers.
Our embed generator is used by a wide range of professionals and organizations.
Generating embed code for video-heavy websites and applications.
Testing stream delivery and embed integration.
Providing embed code for content partners and publishers.
Embedding video content on news sites, blogs, and landing pages.
Embedding lecture videos and educational content.
Adding video resources to online courses and lesson plans.
Testing embed functionality and player behavior across browsers.
Embedding video content on blogs, articles, and product pages.
Learning about embed technology and video player integration.
Validating embed behavior and stream delivery.
Explore these resources to deepen your understanding of HLS, embedding, and streaming.
Main player and tool overview
Advanced Video.js player customization
Articles on HLS, streaming, and more
Learn about PlayAnyM3U8
Get in touch for support
How we handle your data
Acceptable use policies
Copyright and takedown procedures
Coming soon: Detailed guides on HLS, Video.js, adaptive streaming, and more. Subscribe to our Blog for updates.
Find answers to common questions about the embed generator and HLS embedding.
The M3U8 Embed Generator is a free online tool that helps you generate responsive embed code for your own HLS streams. Customize player settings, preview live, and get production-ready code for iframe, React, Vue, WordPress, and more.
No. PlayAnyM3U8 does not host, store, or distribute any video streams. All media is loaded directly from URLs provided by the user.
An iframe (inline frame) is an HTML element that allows you to embed another web page or content within your own page. It's the most common way to embed video players into websites.
Yes, the embed generator supports both live and on-demand HLS streams. The player will automatically adapt to the stream type.
Yes, VOD streams are fully supported. The player will load the entire playlist and allow seeking through the content.
Modern browsers block autoplay with sound to protect user experience. Autoplay may still work if the video is muted, or if the user has interacted with the page first.
Yes, the generated embed code works on any website that supports HTML and iframes. This includes WordPress, Wix, Squarespace, custom HTML sites, and more.
Yes, the embed generator supports MP4 and other HTML5 video formats. Simply provide the direct URL to the video file.
Yes, you can enable or disable controls, fullscreen, picture-in-picture, and more using the generator options.
Video.js supports custom skins. You can override the CSS to match your brand. The generator uses the default skin, but you can modify the CSS after embedding.
Yes, the generator includes a React component tab that produces a complete React component using Video.js with built-in VHS support.
Yes, the generator includes a Next.js tab with a dynamic import example for server-side rendering compatibility.
Yes, the generator includes a Vue component tab with a complete single-file component for Vue.js applications.
Yes, you can include multiple iframes with different stream URLs on the same page. Ensure each iframe has a unique title for accessibility.
Yes, the generator includes a Lazy Loading option. When enabled, the iframe only loads when it is near the viewport, improving initial page load performance.
Yes, Video.js supports WebVTT captions. You can add a <track> element to
the HTML code or use the Video.js API to load captions.
Yes, the generator includes a Picture-in-Picture option. When enabled, users can pop the video out into a floating window that stays on top of other content.
Yes, uncheck the Fullscreen option in the generator to disable the fullscreen button in the embedded player.
Yes, Video.js is open-source and can be self-hosted. You can download the files from the Video.js website and host them on your own server. The embed code would need to be updated to point to your self-hosted files.
The iframe embed loads the player from a separate page, providing isolation and security. The HTML embed includes the player code directly in your page, giving you more control but also more responsibility for security and maintenance.
Yes, the generator includes a WordPress tab with code that works in the WordPress editor. Simply paste the code into the WordPress Text Editor (HTML view).
The referrer policy controls what referrer information is sent with requests from the iframe. This is important for privacy and for streams that validate the referrer to prevent unauthorized access.
This usually indicates a network issue or a problem with the stream server. Check that the URL is correct, the server is responding, and there are no CORS or mixed content issues.
Yes, you can use signed URLs (with tokens or signatures) as long as they are accessible from the user's browser. The player will fetch the playlist and segments using the signed URLs.
Yes, the embed generator is completely free to use. No registration, no account, no hidden fees.
Most email clients do not support iframes or JavaScript for security reasons. Embedding video players in email is generally not recommended. Use a static image with a link to the video page instead.
Your privacy is important to us. Here's how the embed generator handles your data:
We respect your privacy and do not collect personal information without consent. We are transparent about our data practices.
Visit these pages for additional tools and information:
If you have any questions or need assistance with the embed generator, please contact us. We're here to help.