Embed Your Stream in a Website

Streaming events to your webpage produces better engagement and longer watch times than streaming to social media destinations and provides the potential for custom branding around your event. With the Resi player, you can embed your stream on any website and leverage Resi's resilient stream, customizable player, and viewership analytics.

Find Your Embed Codes and Stream URLs

There are three main places in Studio where you can obtain an embed code, depending on what kind of content you intend on doing any of the following:

• Display Live Web Channel Videos
• Embed Saved Videos
• Embed a Scheduled Event

Display a live web channel video

Web channels provide embedding options for live and replayed video content. Your viewers will be able to see the live broadcast associated with the web channel you have created for your event.

1. In Studio, go to Settings > Web Channels.
2. Click the web channel you want to embed.
3. In the channel details, click the share icon.
4. Click the copy icon next to the embed code, stream URL, or web player link you would like to distribute.

   

5. Paste the code into the website, third-party hosting service, or another distribution method of your choice.

Embed a library video

Studio's Library allows you to house videos and distribute them without having to worry about them expiring.

1. In Studio, navigate to the Media page.
2. In the Library tab, click the video you would like to distribute.
3. Click the share icon .
4. Click the copy icon next to the embed code, stream URL, or web player link you would like to distribute.
5. Paste the code into the website, third-party hosting service, or another distribution method of your choice.

Embed a scheduled event

When you create a scheduled event, an embed code is generated that will become live at the scheduled start time. 

1. In Studio, navigate to the Schedule page.
2. Find the event with a web destination you would like to use and click on it.
3. In the event details, click the Destinations tab.
4. Click the share icon  next to the web destination set for this event.
5. Click the copy icon next to the embed code, stream URL, or web player link you would like to distribute.
6. Paste the code into the website, third-party hosting service, or another distribution method of your choice.

Options for Embedding Your Stream

Embedding your video into your webpage or for use with apps or third-party hosts may require you to use different codes, IDs, or links for different purposes. You can choose one or more of the following options based on the needs of your organization.

Script tag

This is your standard embed code, sometimes called a script tag, without any inline framing elements to house it. This type of embed code may be required by some may also be necessary to use with third-party products and services, like Planning Center Publishing.

Standard iframe

If the parent container you would like to house your video in can be resized horizontally and vertically, then you should use a standard iframe. This embed code option is used most often when attempting to preserve the aspect ratio of your video in such cases. You should only use this code if your parent container does not have a fixed height. 

Alternative iframe

If the parent container for your embed code has a fixed height that does not match that of your video, the alternative iframe will resize your video to fit the parent container while maintaining the proper aspect ratio. This often happens in webpages that only resize containers to fit a window horizontally. The height of the parent container must be fixed in order for this code to work properly. 

Stream URLs

Certain third-party host sites will require you to use one of the Dash or HLS stream URLs, available with a Professional or Enterprise Resi live-streaming plan. You must toggle them on in the web channel you're broadcasting to to access them. In most cases, you can use stream URLs to broadcast via third-party and OTT applications. 

HLS, or .m3u8, is produced by Apple and and only allows for H.264 and HEVC encoding. If you're using an Android device or any other encoding format than H.264 or HEVC, use the DASH URL. In some cases, the third-party or application host will tell you which stream URL to use. 

Learn more about finding your stream URLs.

Standalone Web Player

Sometimes, you may find it more appropriate to share your broadcast through a standalone web player. Although not an embed option, it's a convenient way to share your content through a URL that contains nothing more than a web player that broadcasts your content.

Web channels, individual web videos, and individual library videos have standalone player links. Use the web channel link if you plan to broadcast more than one piece of content from a web channel but don't want to change the link. 

If you would like to distribute your broadcast through a standalone link and not embed it to your website or hosting platform, this option may be for you.

The standalone player is not an authenticated or private link. Anyone with the link can view your content. 

Customize the Web Player

In some cases, you may want to adjust specific settings for the Resi web player. This can allow you to do things like use one of your videos as a looping video with no sound or control options, e.g. for a hero banner. You can make such adjustments by appending the following text to the end of the web player link or the end of the URL portion of your embed code.

Enable or disable parameters

You can enable a function by entering a "1" and disable it by entering a "0" at the end of each parameter. For example:

https://control.resi.io/webplayer/video.html?id=7139e9de-0455-4905-9e09-5195b9abfcd9&iframe=1&background=1&showUnmutebutton=0

This code puts your web player in an iframe, has it run as a background video, and hides the unmute button.

The following parameters are available for you to customize the web player according to your needs:

• &autoplay= Autoplay on or off.
• &background= Hides the controls, the unmute button, loops the video, and disables audio.
• &callToActionButton= Show the call to action button in the web player.
• &controls= Shows/hides the scrub bar, playback and volume controls, quality settings, and fullscreen option.
• &debug= Outputs player logs to the Javascript console in the browser.
• &iframe= Places the player in an inline frame.
• &loop= Loops the content being played.
• &mute= Set the default load state of the player as muted.
• &showUnmuteButton= Shows/Hides the unmute button.
• &startPos= Start playback at a later point through increments of seconds (e.g. &startPos=60 would load the video at the 1-minute mark).
• &mode=live Live mode allows you to hide the play/pause button and the scrub bar for the standalone or iframe embedded players. 

Currently, the Live mode parameter functions with events that are live, not on demand.