Embed Your Stream in a Website

  • Updated

Streaming events to your own 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. Locate the web channel you need.
  3. Click the options icon actions_icon_button.png next to the channel.
  4. Select View Details.
  5. In the channel details, scroll down or click the Embed Options tab.
  6. Click the copy icon studio_copy_icon.png next to the embed code, stream URL, or web player link you would like to distribute.
  7. Paste the code into the website, third-party hosting service, or another distribution method of your choice.

Embed a Saved Video

The Library allows you to house saved videos and distribute them without having to worry about them expiring.

  1. In Studio, navigate to the Library page.
  2. In the Saved Videos tab, locate the video you would like to distribute.
  3. Hover over the thumbnail of the video and click the options icon actions_icon_button.png  in the bottom corner.
  4. In the details page, click the Embed tab below the video player preview.
  5. Click the copy icon studio_copy_icon.png 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.

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 share_icon.png next to the web destination set for this event.
  5. Click the copy icon studio_copy_icon.png 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. 


Standalone Web Player

Sometimes, you may find it more appropriate to share your broadcast through a private link. The standalone web player offers a convenient option for sharing your content through a URL that contains nothing more than a web player to view your event from. If you would like to distribute your broadcast through a standalone link, this option may be for you.

standalone_web_player.png

Dash URL and HLS URL

Certain third-party host sites will require you to use one of the Dash or HLS stream URLs. 


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:

  • &showUnmuteButton=

    Shows/Hides the unmute button.

standalone_web_player_show_unmute_button.png

  • &loop=

    Loops the content being played.

  • &controls=

    Shows/hides the scrub bar, playback and volume controls, quality settings, and fullscreen option.

standalone_web_player_hide_controls.png

  • &background=

    Hides the controls, the unmute button, loops the video, and disables audio.

  • &iframe=

    Places the player in an inline frame.

  • &autoplay=

    Autoplay on or off.

  • &debug=

    Outputs player logs to the Javascript console in the browser.

  • &startPos=

    Start playback at a later point.

  • &scrubBar=

    Show or hide the scrub bar.


Was this article helpful?