Customizing an Embed Builder Experience

In this topic, you will learn how to customize the visual appearance of your Embed Builder experience.

Styles

The Styles panel allows you to customize the visual appearance of your Embed Builder experience. Access it via the styles icon on the right side of the editor. The panel is organized into the following sections:

Theme

  • Theme: Choose between Dark or Light theme

Fonts

  • Primary Font: Changes the font for video titles and headings
  • Secondary Font: Select the secondary font for complementary text elements like text blocks and buttons

General

Contains global style settings that apply across the experience.

Duration Label

  • Background: Color of the duration label background
  • Text: Color of the duration label text

Primary Buttons

  • Background: Button background color
  • Background Hover: Button color when users hover over it
  • Text: Button text color
  • Icons: Button icon color

Secondary Buttons

  • Background: Button background color
  • Background Hover: Button color when users hover over it
  • Text: Button text color
  • Icons: Button icon color
  • Hover: Additional hover state styling
  • Border: Button border color

Tertiary Buttons

  • Background: Button background color
  • Background Hover: Button color when users hover over it
  • Text: Button text color
  • Icons: Button icon color

Video Elements

  • Titles: Video title color
  • Subtitles: Subtitle text color
  • Borders Full Screen: Color of borders in full screen mode
  • Duration Label Background: Background color for video duration labels
  • Duration Label Text: Text color for video duration labels
  • Primary Buttons Background/Text/Icon: Styling for primary buttons within video players
  • Secondary Buttons Background/Text/Icon: Styling for secondary buttons within video players
  • Call-to-action Background/Text/Icon: Styling for call-to-action buttons in videos
  • Tag Background/Text: Styling for video tags

Reset All Styles: Click this button at the bottom to reset all style customizations to default values.

Note: The Embed Builder does not include Header & Footer styling options as it is an embeddable experience without a header or footer.

Next: Embed Builder Settings