Ready iframe or a player of your own?
Take the ready iframe unless you have a developer and a reason. An iframe is a window in your page that shows another page, so the HTML5 player inside it keeps working whatever your theme does around it.
| What matters | The Cue Player iframe | Your own player |
|---|---|---|
| What you paste | One iframe from your control panel | A video tag, a library such as hls.js, and the stream's HLS address |
| Choosing how to play | The player picks hls.js or Apple's built-in HLS for itself | You write that choice |
| Page builder sandboxes | It notices the sandbox and plays there, Apple devices included | Yours to test and work around |
| Language menu, paywall, CDN-to-origin switch | Built in | Yours to build |
| Good for | Nearly every site | An app, or a site with a designed player of its own |
Both routes start the same way: a stream reaching the server. If yours isn't on air yet, the OBS to website guide covers the encoder side. The Cue Player comes with a Primcast video plan, or with Cue on your own server. Through the video CDN, each viewer is served from the nearest of our cities: the player starts there and, if that fails, moves to the origin server by itself. That is not the same as a standby origin with automatic failover, which only Platinum includes.
Copy the code and make it fit any screen
Your control panel shows a ready iframe for each stream. On Cue the button is Copy embed code, in the channel's Watch box, and its sample comes at a fixed 640 by 360. A fixed size is what cuts the picture off on a phone, so swap it for a box that keeps the shape and follows the width of the page.
<div style="aspect-ratio: 16 / 9; width: 100%; max-width: 960px;">
<iframe
src="PASTE-THE-SRC-FROM-YOUR-PANEL"
title="Live video from our studio"
style="width: 100%; height: 100%; border: 0;"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen></iframe>
</div>The src comes from your panel. Take the real code from there, and if it carries attributes this sample doesn't show, keep them: only the fixed width and height need to go. The allow list hands the frame its permissions: this is how Chrome lets a page pass autoplay to a frame from another address. The title tells a screen reader what the frame is, so write your own. Change 960px to suit your layout.
Where the code goes on your kind of site
- WordPress. Add a Custom HTML block (type
/htmlin a new paragraph), open it, paste, and press Update. WordPress strips iframes when the post is saved by someone without theunfiltered_htmlcapability. On a single site that means Administrators and Editors can paste it and Authors and Contributors can't; on a multisite network only Super Admins can. - Wix. In the classic editor go to Add Elements, Embed Code, Popular Embeds, Embed HTML, then Enter Code, paste and Apply. Studio and Harmony name the menus differently. Wix shows only HTTPS code and renders it in a sandboxed iframe. It also says embeds aren't responsive by themselves and that a desktop embed's code can't be edited in the mobile editor, so check the phone view and, if the box looks wrong, hide it there and add a mobile version.
- Squarespace. Add a Code block from the block menu and paste. Iframes in a Code block need the Core, Plus or Advanced plan, and Squarespace warns that code sometimes stays hidden while you're logged in: click Preview in Safe Mode, or look at the page in a private window, before you decide it's broken.
- Plain HTML. Paste the block where the video belongs and upload the file. No plugin, nothing else to install.
Why your stream won't start with sound
The browser decides that, and no player setting overrules it. Chrome always allows muted autoplay. Sound needs one of three things: the visitor has already clicked or tapped on your site, your site has passed Chrome's Media Engagement Index on desktop because they often watch with sound there, or they added it to their home screen or installed it. MDN adds that the rules differ between browsers.
Safari on iPhone and iPad is stricter about tricks. WebKit lets a muted video autoplay, but a video unmuted by script without a tap simply pauses. It also starts autoplay only when the video is on screen and pauses it when it scrolls away.
That's why the Cue Player starts muted and the viewer taps for sound. Work with it. Put a short line beside the player, such as "Tap the speaker for sound", and keep autoplay in the iframe's allow list. Chrome's engagement score also means your own desktop may play with sound while a first-time visitor gets silence.
When the frame stays blank, black or cut off
Start with what you can see, then open the browser console (F12 on a desktop), which reports blocked requests.
| What you see | Usual cause | What to change |
|---|---|---|
| Empty frame, and a mixed content message in the console | An http:// address on an https:// page. Browsers block http frames and script requests outright | Use the https address. Every hosted video plan has HTTPS player links. On Cue on your own server, point a hostname's DNS at the server, then in Settings set Playback addresses to https and tick the Let's Encrypt certificate. When the status reads Trusted, copy the embed code again so the iframe uses the https address |
| Picture cropped, or scrollbars on a phone | Fixed width and height left in the code | Use the 16:9 box above; on Wix, set the sizes to 100% |
| No fullscreen button | The allow list or allowfullscreen was lost in pasting | Paste the panel's code again, then put it back in the 16:9 box |
| The stream is live but the player shows an error | A viewing rule is turning people away: the embedding list, a country rule, required signed links or the viewer limit | Add the page's domain, then go through the other rules |
| Your own player is black, with a CORS message in the console | The stream server isn't sending hls.js the CORS headers it needs | The stream server has to send CORS headers that permit GET requests from your site. If you can't change that yourself, ask whoever runs the server |
| Your own player jumps to full screen on an iPhone | playsinline is missing | Add it to the video tag |
A mixed content fault is the same problem on video and radio. The HTTPS radio stream guide walks through it in more depth.
If you do want your own HLS player
The stream's HLS and DASH addresses are standard, so a player such as Video.js or Shaka can play them, and hls.js can play the HLS one. This is the smallest hls.js embed worth using. It follows the pattern in the hls.js README, with the attributes the sections above call for.
<div style="aspect-ratio: 16 / 9; width: 100%; max-width: 960px;">
<video id="live" style="width: 100%; height: 100%;"
controls autoplay muted playsinline></video>
</div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<script>
const video = document.getElementById('live');
const src = 'PASTE-YOUR-HTTPS-HLS-ADDRESS';
if (window.Hls && Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(src);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = src;
}
</script>Keep muted and playsinline: MDN notes Safari needs playsinline for autoplay. Keep controls as well, so a blocked start still leaves a play button. If you call play() from a script, catch the rejected promise and show your own button; the name to look for is NotAllowedError. This sample has no retry logic or error handling, so treat it as a starting point. It also needs scripts allowed, which the Squarespace plan and WordPress role limits above cover too.
Watch it the way a stranger will
Your editor and your usual browser are poor places to judge an embed. Run this on the published page during a test stream, well before you announce anything.
- Open the page in a private window on a desktop. The video should start muted, or wait for one click.
- Open it on an iPhone in Safari and on an Android phone in Chrome, ideally on mobile data. Check that it plays inside the page, that a tap brings the sound, and that nothing is cut off when you turn the phone.
- Try the fullscreen button, and picture-in-picture where the browser offers it.
- Open the console on a desktop and read any mixed content or CORS messages.
- If you restricted the stream to your own sites, paste the code on a test page at another address. It should refuse to play there.
Keeping the video on your page
An embed code is easy to copy, and an open stream will play wherever it lands. If that matters to you, the player can refuse to run on pages outside the websites you list, limit viewing to chosen countries, and use links that expire. For a paid show, the built-in paywall checks each viewer's purchase before the picture starts.
Cue also has a stricter setting that refuses players which don't say what site they're on, and its manual warns this blocks apps and set-top boxes as well. Our reading: a frame with referrerpolicy="no-referrer", or a builder that hides the page address, could trip it too. So if you turn it on, repeat the stranger test on the live page.
Questions people ask
- Can I force a live video to play with sound when the page opens?
- No. Browsers keep that decision, and a page can't reliably get round it. Chrome allows sound only after the visitor has interacted with your site or in the few other cases it lists, and Safari on iPhone and iPad pauses a video that a script unmutes without a tap. Start muted and make the tap obvious.
- How far behind live will the embedded player be?
- That depends on how the stream is delivered. Regular HLS suits most broadcasts. Low-latency HLS was measured at about six seconds behind live, and it comes on the Starter, Pro and Platinum plans. WebRTC plays in under a second, for when the audience talks back, but only with Cue on your own server, not on the hosted plans. Our low latency guide explains when it's worth it.
- Can one stream appear on two of my websites?
- Yes. Paste the same code on both. If you've restricted embedding, list both domains, or the player will refuse on the one you left out.
- Will my viewers see ads in the player?
- Not from us. The player is ad-free and shows your stream with its own controls, so the only ads are ones you add yourself, such as VAST or server-side ad insertion on Platinum. Pro and Platinum also leave the Primcast name off it.
- Does the same approach work for recorded videos?
- Yes. With a video on demand library, available on Starter, Pro and Platinum, every file has its own player and embed code, so the paste steps, the 16:9 box and the fixes above carry over.