Embedding the SundaySky Player in a Webpage

Overview

SundaySky makes it easy to embed the video you create on any website or landing page. Once embedded, the video plays in an HTML5 player designed for dynamic video streaming to major desktop and mobile browsers.

The code used to embed the video is generated with the SundaySky Embed Code Builder. This easy-to-use tool enables you to define how the player will look and behave—without any technical knowhow. As you configure the player in the Embed Code Builder, you will see a preview of how the player will look once embedded onto your website. 

Currently, SundaySky supports two methods for embedding a video: iframe and JavaScript.
The questions and answers below will help you in deciding which method to use.

1. What are the main features of the iframe and JavaScript embed code?
 
iframe
The code is placed once and is automatically updated. When you make changes to the code via the Embed Code Builder, your HTML or CMS is automatically updated.
The code block is short and easy to work with.
The code is isolated and does not interact with the CSS of the landing page. Any changes made to the landing page CSS do not affect the iframe code.
The code can be used in platforms that do not support running JavaScript.
The following features are not supported: NPS and custom surveys, the SundaySky API data connector, and advanced player configurations.
Enables the collection of viewer engagement data that is then displayed in the video's dedicated dashboards.

 

JavaScript
The code requires manual updates. When you make changes to the code via the Embed Code Builder, a new code snippet is generated. This snippet needs to be copied and pasted again into the HTML or CMS.
The code is more technically advanced than iframe and can support all SundaySky platform features, including NPS and custom surveys, the SundaySky API data connector, and advanced player configurations.
Enables the collection of viewer engagement data that is then displayed in the video's dedicated dashboards.

2.

Can the embed codes be used with all website builder CMS platforms?

The embed codes are broadly compatible with all websites. However, some features may not be available across certain website builder platforms.
Static videos, without personalization, will generally play without any issues.
Personalized videos that require URL parameters in order to customize the video are not compatible with certain CMS platforms. Currently, the known incompatible platforms are Google Sites and Wix.
3. How should the SundaySky embed codes be used?
Both the JavaScript and iframe codes should be embedded directly into the webpage.
If the page is custom-developed, paste the embed code directly into the HTML code.
If you are using a website builder CMS (such as WordPress or Squarespace), paste the embed code into a custom code block. This will give you the best result.
Several CMS platforms use "video" embed blocks; many of these are incompatible with the SundaySky embed codes.

Note:
If your video is personalized, refer to the end-to-end articles according to data connector for instructions on how to share the video after you have generated the embed code.
For in-depth information on sharing a video in general, see Sharing a Video.


Generating the Embed Code

1. Open the relevant video in the Video Page.
2. Select the Edit tab and then approve the video.
  Approve_video.png
3. In the Share tab, next to Embed Video, click the plus sign.
  Embed_video_plus.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.png
4. Customize the settings in each section 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:
Poster_image.png
To replace the poster image:
a. Hover over the image thumbnail and then click the Options menu.
  Options_menu.png
b. Select Replace media.
c. From the Media Library, select or upload the image that you want to use.
  Media_library_new.jpg
d. Click Save at the bottom of the Media Library.
e. (Optional) After replacing the image, click the Edit asset icon on the thumbnail to crop or flip the image.
  Edit_asset_new.jpg
5. After you finish configuring all the sections, click Create at the bottom of the Embed Code Builder.
6. Select the embed method that you want to use.
▶ By default, iframe is selected. It is not selected if you enabled the NPS survey, you previously used the JavaScript embed code, or if you created this video by duplicating a video that uses the JavaScript embed code.
  Select_embed_method.png
7. Click Copy code.
  Copy_code.png
8. On your webpage, paste the embed code snippet where you want the player to appear.

Editing the Embed Code

1. Open the video in the Video Page.
2. In the Share tab, by Embed Video, click the Share icon.
  Embed_video_share_icon.png
3. Click the pencil icon.
  edit_icon.png
  The Embed Code Builder is launched.
  Landing_page_builder_launched.png
4. Edit the settings as required in any of the sections.
5. Click Apply changes at the bottom of the Embed Code Builder.
6.
When working with iframe When working with JavaScript
Click Apply to incorporate the changes you made. The player that you embedded is automatically updated.

Apply_these_changes.png

Generating a Preview Page

After creating the embed code snippet, you may want to show the player page to colleagues or stakeholders before going live. In this way, others can interact with the player and offer feedback. A preview page is active for seven days.

When working with JavaScript embed code:
As the code snippet needs to be pasted manually, you can share the preview page with others before pasting the code in a live site. This can be done with both the initial embed code and with every embed code that is generated after making edits.

When working with iframe embed code:
Once the code snippet is pasted, any edit made to the code in the platform is automatically updated on your landing page. For this reason, practically speaking, the preview page should only be shared after the initial code is generated and before it's on the landing page.

Preview_page.png


Notes for JavaScript

1. The player is responsive and you can define its size via CSS properties if needed.
2. After you've pasted the code snippet in your HTML editor, you can further customize the code according to your preferences using SundaySky Player—Full List of Player Attributes.
  Advanced_configurations.png
3. 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, a list of the data reported by each 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