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? | ||||||||||||||||||||||
|
|||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||
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. |
||||||||||||||||||||||||||||||||||||||||||||||
Note:
|
|||||||||||||||||||||||||||||||||||||||||||||||
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. |
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 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. |
|
|
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. |