How do I embed the BoxCast video player onto my website?

Note: You will need to decide where on your organization's website you want the video player to appear.  You may 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. If you want to embed an individual broadcast on your website, see instructions here.

Click "Embed" on the left menu bar.

 

Select Event(s) To Embed

All Events (Recommended): This is the "Master" widget. It will show ALL events (excluding Private) that you schedule on your account.

One BoxCaster: This widget will only show events that are scheduled on a specific BoxCaster.

Custom Channel: This widget only shows events that are tagged for a specific channel that you have created.

Single Event: This widget will only show ONE upcoming or current event (selected from the drop down after choosing this option). You can also find this code on the video page for the event in question.

For instructions on creating a custom channel click HERE.

 

Select Widget Type

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

Inline Frame: If your web hosting provider does not allow JavaScript or if you experience conflicts with your site's other JavaScript) you can select the Inline Frame method. Note that this is NOT responsive and will not resize automatically to different device screens.

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.

Highlight Grid: This code allows you to embed all of the highlight clips that you have created.

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

 

Select Display Options

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 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.

 

Advanced Display Options

The BoxCast embed code has several advanced options available.

  • Autoplay: If selected, the event video will automatically begin playing when a visitor loads the page. Note that this is always true for Live events.

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

  • 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).

  • Playlist on Right: Slight style change to the widget. Archives will appear to the right of the video player instead of underneath.
  • 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 is recommended to be a 720p MP4 video encoded with the H.264 codec.
  • Default Video Selection: The logic that BoxCast uses to determine the first video to be shown can be altered.
    • Show next event immediately: (default) 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 the *closest* option, the widget will only show the next upcoming event when it is closer in time than the previous recording.

 

Test the Embed

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

Click "Copy to Clipboard" in the Generated Code section then paste the code into the appropriate section on the backend of your website.

  • Note: If you navigate away from this page all options you have selected will be reset to default values.
  • Note: If you wish to make changes to your embed code it must be re-copy / pasted to your website with the updated selections made. 

 

 

 

 

 

 

javascript, iframe, i frame, i-frame, java script, html, snippet, embedding

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk