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.

Generating the Embed Code

1.	Open the relevant video in the Video Page.
2.	Select the Edit tab and then approve the video.
3.	In the Share tab, next to Embed Video, click the plus sign.
	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.
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—also known as the video thumbnail—is displayed in the center of the page. It can be replaced with any image from the Media Library or your computer. Note: We recommend using an image with a resolution of 1280 x 720 and an aspect ratio of 16:9. An image with a higher resolution can also be used, as long as the aspect ratio is maintained. The image used needs to meet these media specifications. To replace the poster image: a. On the image thumbnail, click Replace.   b. From the Media Library, select or upload the image that you want to use.   c. Click Save at the bottom of the Media Library. d. (Optional) After replacing the image, click Edit on the thumbnail to edit the image.   The settings in this section define the video player controls located beneath the player window. a. Pin player bar Toggle on if you want the control bar to always appear beneath the video. Toggle off if you want the control bar to appear only when the viewer interacts with the video. b. Show transcript button Toggle on to add a button that, when clicked, displays a detailed video transcript in a new tab. Toggle off if you do not want to include the transcript button. c. Turn CC on by default Toggle on to turn closed captioning on when the video starts playing. Toggle off if you do not want closed captioning to turn on automatically when the video starts playing. d. Show a large Play icon Toggle on to replace the standard-sized play arrow with a larger arrow. This can be useful for grabbing attention on a small or busy screen. Toggle off to display the standard-sized play arrow. e. Show a rectangular Play icon Toggle on to replace the round play button with a rectangular play button. You can enlarge this button by also toggling on Show a large Play icon.  By default, the color used for the play button is the Primary color as defined in the brand. This color can be changed to any color you like. To change the color: a. Click the current color.   b. Select a new color by doing one of the following: a. Select a color defined in the brand. b. Enter the hex code. c. Enter the R, G, and B values. d. Use the color slider to visually select a color.   Note: If you are embedding the player in an iframe, an NPS survey cannot be included. If relevant to your content, you can include an NPS survey at the end of the video. This survey, designed to gauge customer satisfaction, consists of only one question. The question states: After watching this video, on a scale of 0 to 10, how likely are you to recommend our business to a friend or colleague? The survey appears below the player once 90% of the video has played (see example below). The results of the survey are aggregated and displayed in the Survey dashboard. Toggle on the NPS option if you would like to include the survey.
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.
7.	Click Copy code.
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.
3.	Click the pencil icon.
	The Embed Code Builder is launched.
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. Click Copy code and then paste the new snippet on your webpage.

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.

Notes for iframe

1.	If fullscreen mode cannot be enabled in the player, add allowfullscreen to the code snippet in the following location:

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 JavaScript Embed Code: Player Attributes.
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.