How do I Embed the Player?

You can play your channel on your own website with a ready-made snippet, or in any player or app that supports HLS.

Get the Embed Snippet

1. In the channel menu, click Resources. Developer Resources opens.
2. Under Player Embed Snippet, click the copy button. Cecula Stream confirms Embed code copied to clipboard!

Resources also shows your Broadcast Configuration, including the Public HLS Entry Point: your channel's HLS playback link.

Add It to Your Website

1. Paste the snippet into your page's HTML, where the player should appear. In a website builder, use its custom HTML or embed block.
2. Publish the page, open it and click play.

The snippet:

• adds a video player with controls, as wide as its container up to 800 pixels, centred
• plays your channel's HLS link using hls.js, loaded from cdn.jsdelivr.net, and switches quality automatically to suit each viewer's connection
• uses the browser's own HLS support in Safari, including on iPhone and iPad

Customise the Snippet

To	Change
Make the player wider or narrower	Edit max-width: 800px on the cecula-player-wrapper <div>
Put two players on one page	The snippet uses the ID cecula-video. Give the second player a different ID, in both the <video> tag and the script
Start playing automatically	Add autoplay muted to the <video> tag. Browsers only start video automatically when it's muted
Avoid surprise updates	The snippet loads the latest hls.js. Replace hls.js@latest with a specific version number

Deployment Best Practices

• Allow the player's sources. If your site has a content security policy, allow scripts from cdn.jsdelivr.net. Also allow connections to the domain in your HLS link, and blob: media, which hls.js uses to play the stream.
• Let the player size itself. The player fills its container, so set a max-width on the element around it rather than on the player.

Use the HLS Link in Other Players

Your Public HLS Entry Point, the address ending in master.m3u8, works in any HLS player, for example:

• web players such as video.js or JW Player
• VLC, using Open Network Stream
• smart TV, set-top box and mobile apps

The link carries every output resolution your channel broadcasts, and players choose between them. See Stream Output Resolutions.

Things to Know

• Privacy doesn't apply. Privacy & Access only protects the watch page. Anyone with your HLS link or a page with your player can watch.
• The embed shows video only. Your watermark and news scroll are part of the video, but program details and sharing buttons aren't. To show what's on, use the Channel API. See How do I Use the Channel API?.
• Embedded viewers count. They're included in Active Viewers on the Overview.
• The link doesn't change. It's built from your channel's slug, so regenerating your stream key doesn't affect it.