All Collections
Embedding + Player Settings
Embedding
Adding BoxCast Live Stream to your Website
Adding BoxCast Live Stream to your Website
These step-by-step instructions explain how to embed the BoxCast video player onto your organization's website.
Josh Mathus avatar
Written by Josh Mathus
Updated over a week ago

BoxCast makes it easy to embed your live stream on your website. This will allow you to embed BoxCast Features like chat, documents, and indexing.

Note: You'll need to decide where on your organization's website you want the video player to appear. You might need help from your website manager for this step. This only needs to be done one time.

This article describes how to embed an entire channel of content onto your site. You can also embed a broadcast individual on your website.

Start by, clicking Embed on the left menu bar.

Screen_Shot_2019-11-26_at_12.12.15_PM.png

Select a Media Type. The Broadcasts tab will include all public broadcasts in your account. The Highlights tab will show all the highlights from your account in an embed code.

Next, select a Filter.

  • All (Recommended): This is the master widget. It'll show all the events (excluding private) you schedule on your account.

  • By Channel: This widget only shows events that are tagged for a specific channel that you've created. For instructions on creating a custom channel, click here.

  • By Source: This widget will only show events that are scheduled specific to the Source you choose (e.g., RTMP, BoxCaster, etc.).

  • By Broadcast: This widget will only show one upcoming or current event (selected from the drop-down menu after choosing this option). You can also find this code on the Video page for the event in question.

Select an Integration Method.

  • Javascript: Most of the time, you should select the default JavaScript widget.

  • Inline Frame: If your web hosting provider doesn't allow JavaScript (or if you experience conflicts with your site's other JavaScript), you can select the Inline Frame method. Note: This is NOT responsive and won't automatically resize to fit different device screens.

  • Link to BoxCast.tv: The simplest method, Link to BoxCast.tv, generates a URL you can simply share on Facebook, Twitter, in an email, etc. to direct your viewers to watch your content without any hosting requirements.

Now it's time to select a Layout. To see which options come with each layout, click Advanced Settings, and feel free to customize it from there.

Screen_Shot_2019-11-26_at_1.23.46_PM.png

Advanced Display Options

Default Video Selection

The logic BoxCast uses to determine the first video to be shown can be altered.

  • Show Next Event Immediately: With this option, the widget will default to showing and selecting the next future event as soon as the current live event ends.

  • Show Closest Event: With this option, the widget will only show the next upcoming event when it's closer in time than the previous recording.

Layout Customization

  • Show Description Below Player: Check this box to include any title and description you add to an event. This will appear beneath the embedded player.

  • Show Documents: This will display your documents if attached to the broadcast.

  • Show Video Index: This will display your video indexing if you set that up in the broadcast.

  • Two-Column Layout: Slight style change to the widget β€” archives will appear to the right of the video player instead of underneath.

  • Show Playlist: Check this box to show past events that have been broadcast. The player will display the last 20 in chronological order. To show events further back, viewers can simply click the last event in line and more options will appear.

  • Hide Overlay Messages Before Broadcast: This will hide all overlay messages like your countdown timer before the broadcast starts.

Player Settings

Customize Auto-Play Behavior: If selected, you can decide if (and how) the video begins playing when a visitor loads the page.

  • Do Not Auto-Play: The player will not try to play automatically β€” the viewer will have to click or tap the player to begin.

  • Try With Sound: The player will attempt to play the stream automatically; if the browser prevents auto-play, the viewer will have to click or tap the player to begin.

  • Try With Sound or Muted: The player will attempt to play the video automatically; if the browser prevents auto-play, the player will mute itself and try to play the stream again. (Many browsers allow auto-play if the video is muted.) If this option isn't selected, live broadcasts will default to Try With Sound, and recorded broadcasts will default to Do Not Auto-Play.

  • Disable Live DVR: By default, DVR scrubbing is enabled for all live videos. If checked, the player will disable the feature.

  • Third-Party App: You can also select the Third-Party App widget to generate a web URL that can be embedded into other mobile apps, such as Subsplash.

Additional Features

  • Countdown Timer: If selected, the player will show a large countdown timer for future events (as opposed to the default of just showing the date/time of the broadcast).

  • Custom Poster Image: This image will show behind the Play button instead of the automatically captured frame. The image should match the video player aspect ratio of 16:9. It is recommended to be in JPG or PNG format with a resolution of 1280x720.

  • Custom Pre-Event Video: This video will play in a loop before the event starts. The video should match the video player aspect ratio of 16:9. It's recommended to be a 720p MP4 video encoded with the H.264 codec.

After you've selected your settings, now it's time to Preview the Embed.

Screen_Shot_2019-11-26_at_1.32.13_PM.png

Please click the Preview Embed Code button to ensure the widget displays the proper events with the settings you've configured. When you're satisfied, copy the generated code.

Click Copy to Clipboard in the Generated Code section. Then, paste the code into the appropriate section on the back end of your website (including Wordpress).

Once you copy and paste the code on your website. It'll automatically update with all public broadcasts.

Common Questions

Why won't my player go full screen?

If you can't make the player go full screen when clicking the Expand button on the widget, it's likely you have the widget code posted in an iframe with no "allowfullscreen." Enable full screen in your CMS and you should be good to go.

If you are using Wix as your webhost you will want to follow these directions to allow your player to go full screen.

Did this answer your question?