Embedding the SundaySky Player in a Webpage

Background

SundaySky provides an HTML5 player designed for dynamic video streaming to all major desktop and mobile browsers. The player is responsive with default dimensions of 640 x 360 pixels. CSS properties can be used to overwrite these dimensions, if needed.

The player code is generated using the Embed Code Builder. This easy-to-use tool enables you to define how the player will look and behave, without requiring any coding knowledge.

This article provides instructions on how to embed the SundaySky player in a webpage when your video is not personalized.

Click to see which article to use if your video is personalized

Generating the Embed Code

1. Open the relevant video in the Video Page.
2. In the Embed Video channel, click + Create.
  Click_plus_create_120.png
  The Embed Code Builder is launched. It includes four sections, each with settings that you can configure.
▶ The player is displayed in horizontal or vertical view, depending on the aspect ratio of the video.
  Embed_code_builder_130.png
3. Customize the settings in each expander according to your preferences. As you configure the settings, the changes are reflected on the page.
▶ Click the relevant tab below for step-by-step instructions.
 
Poster Image Player Colors NPS
The default poster image for the video is displayed in the center of the page:
Default_poster_image.png
To change the poster image:
a. Hover over the image thumbnail and then click the Actions menu.
  Actions_Menu.png
b. Select Replace media.
  The media library is opened.
  Media_library_opened.png
c. Locate or upload the image that you want to use.
d. Select the image and then click Use at the bottom of the media library.
4. Click Create at the bottom right of the Embed Code Builder.
▶ If you accessed the Embed Code Builder from the Share menu, Create & Share is displayed on the button.
  The embed video code is created.
5. Click Got It! to close the window.
  Embed_video_created.png
6. In the Embed Video channel, click the three dots and then click Preview to generate a preview page.
  Preview_page_130.png
7. (Optional) Access the Embed Code Builder and make any required edits.
8. To get the code itself, follow the steps in the next section: Sharing the Embed Code.

Sharing the Embed Code

1. Make sure that the video is published.
2. On the video page, click Share and then select Embed Video.
  Share_menu.png
3. Click Copy to copy the player embed code snippet.
  Click_copy_new.png
4. On your webpage, paste the embed code snippet, placing the div element where you want the player to appear.
  div_element_new.png

Notes

1. If you edit the embed code, you need to repeat the sharing process in order to copy and paste the new snippet.
2. Every preview page that you generate, used to test the player page, is active for seven days. There is no limit to the number of preview pages that can be generated.
3. After you've pasted the code snippet in your editor, you can further customize the code according to your preferences using SundaySky Player—Full List of Player Attributes.

Web Analytics and Video Event Integration

The video player emits events for various events within the video and player, and while the viewer interacts with the video. Event listeners can be used to trigger any JavaScript code that you define. For a complete list of events, data which can be exposed by an event, and code examples, see Integrating with Player Events.

Was this article helpful?
0 out of 0 found this helpful

Still Have Questions?

SundaySky Support is here for you

contact support