Skip to main content

Add videos to Pages

Upload, embed, or schedule videos on Kajabi Pages or the Premier legacy template.

A Video block puts your video on a page so visitors can watch without leaving your site. Upload a video to Kajabi, embed one from YouTube, Vimeo, or Wistia, or schedule an Event Video that changes before, during, and after an event.

This guide covers pages built with the Website Builder and Kajabi Pages. If your pages use the Premier legacy template, go to the Premier legacy template sections at the end of this article.

Upload a video to a Video block

  1. From the Dashboard, open the Website tab, then click Pages.

  2. Open the page editor for your page. Learn how to open the page editor.

  3. Click the Section you want to edit, or create a new Section.

  4. In the sidebar, click Add Content.

  5. Select Video.

  6. Find the new Video block at the bottom of the Section.

  7. In the side panel, click Video Actions, then select Upload a New File or Select a Recent File.

  8. Click Save to keep your changes.

Note: To delete the video, remove the block from your page. Learn how to delete a block.

Customize a Video block

Adjust the Block width within the Section, choose your video and thumbnail, set the player controls, and change the look and feel of the block.

Select the video and thumbnail

  1. In the side panel, click Video Actions.

  2. Select Upload a New File or Select a Recent File to choose the video.

Read Video formats supported by Kajabi for accepted formats.

To choose the image visitors see before the video plays, upload a thumbnail with Upload a New File or Select a Recent File. Thumbnails can be GIF, JPG, or PNG files.

Note: If you don't add a thumbnail, the default placeholder image stays as the video's thumbnail.

Set the video player controls

Choose which controls your visitors get when they watch your video:

  • Check or uncheck Show Controls On Load to display player controls when autoplay is off

  • Check or uncheck Autoplay to play a muted video when the page loads

  • Check Loop Video to replay the video each time it ends

  • Check Play Button to display a play button when autoplay is off, or the volume badge when autoplay is on

  • Check Allow Full Screen to let visitors watch in full screen

  • Check Show Small Play Button to display a small play button in the bottom left corner of the video

  • Check Show Playbar to display a playbar

Example with all Video Player Controls enabled:

5531A63A-B469-416B-8382-E59DA477FA01.png

Tip: By default, your Primary Color of your Page sets the color of the player controls. Override it by changing the Player accent color in the Video block sidebar editor.

Embed a video from YouTube, Vimeo, or Wistia

Embedding takes a video from an external hosting platform like YouTube, Vimeo, or Wistia and posts it on your page. Visitors watch it on your page without leaving your site.

Add a Video Embed block

  1. From the Dashboard, open the Website tab, then click Pages.

  2. Open the page editor for your page. Learn how to open the page editor.

  3. Click the Section you want to edit, or create a new Section.

  4. In the sidebar, click Add Content.

  5. Select Video Embed.

  6. Find the new Video Embed block at the bottom of the Section.

Paste the video embed code

  1. Open the page editor that contains the Video Embed block.

  2. Click the Video Embed block to open the sidebar editor.

  3. In the sidebar, paste the embed code into the Embed Code field.

  4. Click Save to keep your changes.

Add an Event Video

An Event Video is a video that appears on a set date and time. It's most often used to promote and launch pre-recorded webinars.

An Event Video generates four blocks that display on a schedule: before the event, at the event start, during the event, and after it. While you edit, you see all four so you can review the sequence. Visitors see only the block that matches the current time.

See how an Event Video sequence looks to visitors

Tip: To test your own sequence, add an Event Video block to your page and create a new Event in your Marketing tab with a start time close to now. Then click Preview to watch the sequence play.

Add an Event Countdown block

Create an Event in your Marketing tab first, because the Event Video needs an Event to follow. Learn how Events work in Kajabi.

  1. From the Dashboard, open the Website tab, then click Pages.

  2. Open the page editor for your page. Learn how to open the page editor.

  3. Click the Section you want to edit, or create a new Section.

  4. In the sidebar, click Add Content.

  5. Select Event Countdown.

  6. Find the new Event Countdown at the bottom of the Section.

Add the Event Video to the countdown

  1. In the Event Countdown sidebar, click Add Content.

  2. Select Event Video.

  3. Click Edit on the new video player, or use the During Event menu to upload a video.

  4. Click Save to keep your changes.

Customize an Event Video

Choose the Event, then customize each stage of the sequence. Block width, Background, layout, animations, and Time Reveal work as described in Adjust block width, background, layout, and animations below.

Choose the Event

You can only select an Event that already exists in your Marketing tab.

  1. In the Event block editor, open the Event dropdown.

  2. Click Edit your Events below the dropdown.

64C83BFB-4073-4FDC-BBD0-E999ED0A18C0_4_5005_c.jpeg

Customize the Call to Action button

Add and customize the action and appearance of a Call to Action button. Your changes apply to the buttons in the Before Event and After Event blocks. Set the message on each button in that block's own settings.

Customize the Before Event countdown

Edit the text (to fit your language and brand), font size, and color of the Numbers and Labels. Click the Color Wheel to pick a color from your site palette.

To use a custom color, click the color wheel, then enter your RGB color code or use the sliders:

  • The square box adjusts the brightness and saturation

  • The horizontal rainbow bar selects the hue

  • The horizontal gradient bar selects the opacity

Customize the At Event Start message

Customize what visitors see when the Event begins:

  • Event start heading

  • Event Start Button Text

0B582F5D-E4FB-48C7-AB6A-9B528152089C.png

Set up the During Event video

Upload the video that plays for the Event, select a thumbnail image, customize the player color, and choose the player controls:

  • Show Controls On Load: Display the player controls when the video loads

  • Play button: Display a large play button in the center of the video when it loads

  • Allow Full Screen: Let visitors expand the video to full screen

  • Show Small Play Button: Display a small play button in the bottom left corner of the video

  • Show Playbar: Display a visual timeline of the video

  • Video Settings: Display settings like quality control and playback rate

Customize the After Event message

Customize the messaging visitors see after the Event Video ends:

  • After Event Heading: Customize the heading text

  • After Event Button Text: Customize the button text

  • After Event Button Action: Choose what happens when visitors click the button

Set the After Event Button Action

As with the Call to Action, choose to:

  • Lead visitors to a custom Landing Page

  • Lead to a sale on a Checkout Page

  • Encourage visitors to download a file

  • Lead to any web page with a URL link

  • Open a Two-Step Opt-in Popup

  • Link to a section of the page

Delay the countdown with Countdown Offset

Countdown Offset delays the end of the countdown by the amount of time you set. For example, if an Event starts at 10:00am and you set the offset to 3 minutes, the countdown timer ends at 10:03am. Registrants can join before the Event officially begins, as the timer shows.

Tip: Leave Offset blank to end the countdown timer at your Event time.

Adjust block width, background, layout, and animations

These settings work the same in the Video, Video Embed, and Event Video blocks:

Add video with the Premier legacy template

Note: Premier is a legacy template and may be outdated. The sections above cover pages built with the Website Builder and Kajabi Pages.

In Premier, you add video as a Section from the page editor sidebar. The sections below cover adding a video, embedding a video, and adding a Multi-Video Launch to a Premier page.

Add a Video Section with Premier

  1. From the Dashboard, open the Website tab, then click Pages.

  2. Select the page you want to customize, or create a new page.

  3. Click Customize to open the template editor.

  4. Click + Add Section in the sidebar.

  5. Select Video.

  6. Click Add.

  7. Find the new Section at the bottom of the page.

  8. Click Save to keep your changes.

Select the video for a Premier Video Section

  1. Open the Video Section.

  2. In the sidebar, click Video Actions.

  3. Select Upload a New File or Select a Recent File.

Read Video formats supported by Kajabi for accepted formats.

Select the thumbnail for a Premier Video Section

Upload a thumbnail image to display as the placeholder for your video. If you don't upload one, the image displayed with the Section stays as the thumbnail.

Customize the Video Section heading and subheading

Edit the message displayed above the video.

Turn on Autoplay in a Premier Video Section

Enable Autoplay to start playing the video when the page loads.

Show a call to action at the end of the video

Add a Call to Action when your video ends. Customize the CTA message, background color, and text color. Check Show CTA Message At Video End to turn it on.

Add more video end calls to action

Select Add Video End CTA to include additional calls to action. Advanced settings let you customize the CTA text, action, appearance, and Time Reveal settings.

Change the Premier Video Section appearance

Change the Background and Text Color, adjust the Spacing of the Section, and customize the color of the video player.

Embed a video with Premier

Add a Video Embed Section to a Premier page, then paste in the embed code from YouTube, Vimeo, or Wistia.

  1. From the Dashboard, open the Website tab, then click Pages.

  2. Select the page you want to customize, or create a new page.

  3. Open the page editor for your page. Learn how to open the page editor.

  4. Click + Add Section in the sidebar.

  5. Select Video Embed.

  6. Find the new Video Embed Section at the bottom of the page.

  7. Click Save to keep your changes.

Copy the video embed code for a Premier page

This example copies the embed code for a video hosted on YouTube:

  1. Open the video you want to embed.

  2. Click Share.

  3. Click Embed.

  4. Click Copy.

Paste the video embed code into a Premier page

  1. Click your Video Embed Section to open the editor.

  2. In the sidebar, paste the embed code into the Embed Code field.

  3. Click Save to keep your changes.

Add a Multi-Video Launch with Premier

A Multi-Video Launch displays multiple interactive images so you can design a unique viewing experience. Use it to build anticipation, share teasers, and promote your videos and Products while visitors explore your page.

  1. From the Dashboard, open the Website tab, then click Pages.

  2. Select the page you want to customize, or create a new page.

  3. Open the page editor for your page.

  4. Click + Add Section in the sidebar.

  5. Select Multi Video Launch.

  6. Find the new Section at the bottom of the page.

  7. Click Save to keep your changes.

Note: A Multi-Video Launch displays interactive images that lead visitors to separate pages containing your videos. Set where each image leads with Image Action in the Multi-Video Launch sidebar editor.

Select the Multi-Video Launch image

  1. From the Dashboard, open the Website tab, then click Pages.

  2. Open the page editor for your page.

  3. Click the Multi Video Launch block to open its editor.

  4. In the sidebar, click Select Image.

  5. From the dropdown menu, select Upload a New File or Select a Recent File.

  6. Choose the image you want displayed, then click Save to keep your changes.

Set the Multi-Video Launch image state

Set the image to Clickable, Active, or Locked:

  • Clickable: The image triggers the Image Action you configured when a visitor clicks it

  • Active: Visitors can't click the image, but it isn't greyed out

  • Locked: The image is greyed out and visitors can't click it

Edit the Multi-Video Launch label and title

  • Label: Customize the text displayed above the Title

  • Title: Customize the Title immediately above the image

Set the Multi-Video Launch Image Action

An Image Action runs when a visitor clicks the image. Use it to:

  • Lead visitors to a custom Landing Page

  • Lead to a sale on a Checkout Page

  • Encourage visitors to download a file

  • Lead to any web page with a URL link

  • Open a Two-Step Opt-in Popup

  • Link to a section of the page

Choose Open In New Window to open the destination in a new window when visitors click a clickable image.

Did this answer your question?

Related Articles