Embedding Videos or Playlists on your Site Embedding Videos or Playlists on your Site

Embedding Videos or Playlists on your Site

Your videos and playlists have embed codes that are designed to be dropped into your website. Your consumers can then play the videos directly on the web.

Embed a Video to Your Site

To use a video’s embed codes on your website, follow the steps below.

1. On the Zype navigation menu, click Library.

2. Locate the necessary video, then click the Edit button on the right.

3. Click the Embed & Publish tab.

SI1.png

4. Update embed code settings

SI2.png

  • Paywall - ON
    • If the video requires a Paywall, toggle ON. This paywall will respect whichever monetization is set for the video on the Monetization tab. For more details, see Getting Started with Monetization.
  • Audio Only - If you are embedding an audio-only stream, toggle ON. Read more on this HERE.
  • Offer Switching Between Video and Audio - If you would like to offer the ability to switch freely between video and audio-only, toggle ON.
  • Size - Set the appropriate size for your video. By default, the size is restricted to a 16:9 aspect ratio.
  • For further customizations on your embed code, see Customizing your Video Embeds

SI3.png

  • Paywall - OFF
    • If the video does not require a paywall, toggle OFF.
  • Format - You can choose between iFrame or JavaScript.
    • The iFrame embed provides more customization options.
    • The JavaScript embed is the only option compatible with HTTP ad tags. If you select JavaScript, an option we recommend that you include the JavaScript portion of the embed code before the closing body tag on the page.
  • Auto Play - If you would like the video to start playing automatically, toggle ON.
  • Audio Only - If you are embedding an audio-only stream, toggle ON. Read more on this HERE.
  • Size - Set the appropriate size for your video. By default, the size is restricted to a 16:9 aspect ratio.
  • Lock Aspect Ratio - If you would like to restrict the size of the video to a 16:9 aspect ratio, toggle ON. If you would like to enter a custom size, toggle OFF.
  • Disable Ad Timings - If you would like to disable ad timings to prevent ads from being called on this video, toggle ON. Read more on this HERE.
  • For further customizations on your embed code, see Customizing your Video Embeds

5. Click the Copy to Clipboard button. You can then paste the embed code where desired on your site.

SI4.png

 

To Embed a Playlist to Your Site

1. On the Zype dashboard, click Playlists.

2. Locate the playlist you want to embed on your site, then click on the playlist name.

3. Click the Embed Code tab.

SI5.png

4. Select the format you want to embed the playlist in, iFrame or Javascript

5. Select your desired Playlist Skin (i.e. how videos will be displayed in the embed) from the following options:

  • Grid, Thumbnails & Titles
  • Grid, Thumbnails
  • List, Thumbnails & Titles
  • List, Titles

6. Select your desired AutoPlay setting

7. Select your desired Auto Loop setting. This determines if the playlist will stop playing when it reaches the last video on the list.

8. Resolution is set to a 16:9 aspect ratio by default. You may change this depending on your requirements.

9. Review the Advanced Settings and update as necessary (see To Edit an Embed Code’s Advanced Settings below), then click the Copy to Clipboard button.

10. You can then paste the embed code where you like the playlist to go on your website.

NOTE: Playlists automatically pull the monetization options set up on an individual video level. For example, if the first video on the playlist is free and the second one requires a subscription, viewers can watch the first video, then the subscription paywall appears before they can watch the second video.

To Edit a Playlist Embed Code’s Advanced Settings

Embed codes have advanced options that allow you to customize how the embedded video will appear on the web. We discussed these settings below.

Playlist

The video’s titles and thumbnails are displayed by default. You may choose to disable these options. You may also choose a different background color and maximum height for the embedded video.

Font Color

You may change the font color, the font active color, and the font hover color.

Thumbnails

The video’s thumbnail is set to have a border by default. You may choose to disable this. You may also change the border color, border active color, and border hover color.

Playlist Item

You may change the top, bottom, right, and left margins of the embedded video.