Skip to main content
Customizing and Embedding a Watch
Updated over a week ago

Overview

Once the Basic Details of a Watch have been set up, you can set various customization options to adjust the look and feel of the Watch and the Watch search bar. Whether you want your videos to run on a transparent background or would like to change the color of the search bar, the Watch layout customization settings provide you with a range of customization possibilities. Once the customization has been completed you can embed the Watch on your website or as part of your brand.

Customization Options

The Look and Feel and Search Look and Feel tabs present the customization options.

Note

The following section details the process of customizing Watch settings for a new Watch. The same options below apply to editing an existing Watch.

  1. At the top right of the Studio page, click the Add button next to the Search Watch field. This opens the Create New Channel window in the Channel General tab.

  2. Once the Basic Details tab properties are set, click the Look and Feel tab.

  3. In the Hub Page section set the following properties:

    • Appearance - Select from the dropdown list

    • Font Family - Select from the dropdown list. See Watch Font Family for details.

    • Font Size (default 14px): Select from the dropdown list

    • Font Color - select the from the color palette

    • Background: The Hub background applies to both the Hub itself and to the inline player channel background. Setting the background to “Transparent” sets the background as it appears in the div. For more information, see Setting a transparent Watch background.

    • Search Bar Background - select the color from the palette

    • Dock to header - whether the video player should remain on the screen when the user is scrolling the page on a mobile device

    • Header Offset (Pixels) - Set the offset area (in pixels) from the top of a page used for mobile devices

    • Footer Offset (Pixels) - Set the offset area (in pixels) at the bottom of a page used for mobile devices

  4. In the Channel Defaults section, set the font size and color for the following channel properties: Title, Description, Video Title, and Video Information. For the channel default color settings, select the arrow to either choose a different color or specify the color using RGBA, HEX, or HSLA colors.

  5. In the Customization section, set which engagement controls (Views, Likes, Shares) to appear in the watch and set if the Player page appears as a dialog window over the watch.

  6. Once the settings in the Look and Feel tab have been set, you can proceed to set the Search Look and Feel settings. Here you can set the look and feel of the Search Results Title, the Video Title, and the Video Information. For the search default color settings, select the arrow to either choose a different color or specify the color using RGBA, HEX, or HSLA.
    Also, you can set Search Placeholder text for the desktop devices and Search Button Caption for the mobile devices.
    When done click Save.

For an example of how these parameters map to the channel, see Mapping Parameters: Settings to UI.

Embedding the Watch

Once you've completed entering the basic watch details and chosen any of the customization possibilities explained above, you are ready to embed the Watch. This can be done simply by returning to the Manage Watch page, selecting the horizontal three-dot menu next to the name of the relevant Watch, and choosing the Embed menu item. The resulting pop-up window will display HTML code which you can paste onto your website. For more on embedding your Watch see the section Watch Embed Implementation

Did this answer your question?