Embed your live stream on your website

Your watch page can also sit inside your own church website, as a video player on any page you choose. Visitors watch without leaving your site, and the player always shows what you have on: the live service, or when the next one starts.

You only do this once. The code never changes from week to week, so the player on your site keeps working for every future service.

Get the code

1. In The Hub → Streaming, find Your watch page.
2. Under Embed on your website, click Copy embed code.

The code looks like this — yours has your own watch page address and your church's name:

<div style="position:relative;width:100%;padding-top:56.25%;"><iframe src="https://1stflock.com/watch/grace-community-church?embed=1" title="Grace Community Church live stream" width="560" height="315" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe></div>

Paste it exactly as it is. It makes a widescreen player that fills the width of wherever you put it, on a phone or a computer.

Player colours. The player is light or dark to match each visitor's device. If your website is always light or always dark, choose Always light or Always dark under Player colours before you copy: the code then ends its address with &theme=light or &theme=dark (shown in the code as &theme=dark, which is how a web page writes it).

If your browser will not copy it, the Hub selects the code for you — clicking it selects it all again: copy it with your keyboard (Ctrl+C, or ⌘C on a Mac).

One stream on its own. Each stream in Your streams that has not finished also has an Embed code button beside its link. Use it when a page should show one particular broadcast — a wedding or a funeral, say — instead of whatever is on.

Where to paste it

Paste the code into your website's embed or HTML block — not into a normal text block, which shows the code as words instead of a player.

WordPress

1. Edit the page and click + to add a block.
2. Choose Custom HTML.
3. Paste the code and click Preview to see the player, then update the page.

Squarespace

1. Edit the page and click + (Add block).
2. Choose Code.
3. Paste the code, make sure Display Source is off, and click outside the block. Save the page.

Wix

1. In the Editor, click Add Elements (+), then Embed Code, then Embed HTML.
2. Choose Code, paste the code and click Update.
3. Drag the box's corners to make it widescreen — for example 640 wide by 370 high. Wix adds a small margin around pasted code, so a box a little taller than 16
   keeps scroll bars away. Publish the site.

Other website builders

Look for a block or element called Embed, HTML or Code and paste the code there. Some builders show embeds only on the published site, not in their editor preview: publish, then check the live page.

If the player does not appear after you publish, your website plan or host may remove embed code. Ask your website host whether your plan allows iframes.

What viewers see

• The video starts on its own where the browser allows it. Most browsers start a video without sound until the viewer interacts with it, so the player may start muted with a Tap to unmute button. One tap brings the sound in.
• The controls run along the bottom of the video: play, sound, LIVE, captions, reactions, Give, chat, settings and full screen. They fade while the service plays and come back when the viewer moves the mouse or taps the video. In a small player, the ones that do not fit move into the settings menu.
• Full screen fills the screen with the whole player, chat included, on phones and computers.
• Chat and reactions. When they are turned on for the stream, the chat button opens chat inside the player: beside the video when the player is wide enough, over it when it is not. Chat starts closed, so a small player keeps the service in view. Reactions float up the right-hand side of the video; viewers can turn that off in the settings menu.
• Giving. When live giving is on, a viewer presses Give and the church's giving page opens in a new tab, while the service keeps playing in your page.
• Between services, the player shows when the next stream starts, in the viewer's own time zone.

Private streams

A private stream asks for its access code inside the player, exactly as on your watch page. Until a viewer enters the code, the player shows Private stream in place of the title, so the code on your website never reveals what a private stream is called.

Some browsers block storage for players embedded from another website. Private streams still work there: a viewer who reloads the page is simply asked for the code again.

Changing your watch page address

The embed code contains your watch page address. If you change the address under Change address, the old one stops working immediately — including in the code on your website. Copy the new embed code and paste it in place of the old one.

See Streaming Your Services for everything else about your watch page.