How to customize the embedded player

This feature requires a Starter, Standard, Advanced, Plus, Pro, Business, Premium, or Enterprise membership.

In this article, learn about: 

• Appearance icon
• Customization options
• Player preferences
• Custom player colors
• Buttons and player controls
• Play button location
• Domain-level privacy
• Interaction
• Embed Presets
• Small embedded players
• Third-party players
• Unmute button

Appearance icon

After selecting a video from your Library, the Appearance icon is on the left-side panel of the video settings page.
You can use the Presets dropdown to add new viewing presets. Presets allow you to easily apply the same appearance settings and end screen to multiple videos.

Selecting the Manage presets will let you add new presets and edit or delete previously created presets. 

If you would like to delete a previously created preset, select the Manage presets button under the dropdown and select the 'X' icon next to the title of the preset.

Customization options

There are two ways to edit the player appearance settings for your videos. You can edit the embedded settings for an individual video via the video settings page, which can be found by selecting the Appearance icon on the left side of the screen. Or, you can create Viewing presets in your Account settings and then apply those to multiple videos.

Any time you change the custom embed options for a particular video, that video will automatically update on sites where it has already been embedded.

⚠️Note: The changes made to the interactive settings, customization of the player, and play button position will be reflected on both your Vimeo and embedded site. However, any changes made to the video details and actions will be reflected on the embedded site only.

Player preferences

You have the choice to show or hide your profile picture, title, and/or byline when the embedded video player first loads.

After selecting the Appearance button on the left-hand panel, scroll down to Details to toggle these options.

Note that there is currently no way to include the video download button on the embedded player; this is only accessible from the video page on Vimeo.com. 

Custom player colors

Select the Appearance icon from the left-hand panel on the video settings page in order to open customization settings. You can adjust custom colors by either entering hex color codes or Red-Green_Blue values to choose an exact color. Select the HEX or RGB button to switch between color codes. You can also drag the slider in the color bar and box to manually choose a color.

Below is a breakdown of where each custom color selection will appear: 

 Primary color

• Title background
• Username background
• Button background
• Play button background
• Control bar background

Accent color

• Title background hover
• Username background hover
• Button background hover
• Play button background hover
• Progress bar (Fill)

Icon/text color 

• Title
• Username
• Button icon
• Play button icon
• Progress bar (White, 30%)

Background

• Player background

Buttons and player controls

On the left-hand panel select Appearance, scroll down to Actions to find the Like, Watch Later, Share and Embed buttons. You can toggle each of these on and off as desired, including whether the Share button includes the embed code in the shared lightbox that appears when a viewer selects it.

At the bottom of the Player, find the Controls to toggle the controls and other elements you want to appear here:

• Play bar
• Volume control
• CC/subtitles
• Transcript
• Speed
• Chapters
• Chromecast
• AirPlay
• Picture-in-picture
• Fullscreen button
• Vimeo logo or a custom logo
  • Custom logo is only available to Pro users and above. We recommend using transparent 200×200 PNG files for best results.

Play button location

After selecting the Appearance icon, scroll down to Controls to find options for customizing the location of the Play button on the video player. 

The options for the Play button are explained below:

• Auto: The default option. The play button will appear in the bottom-left, or center responsive to the screen size.

• Bottom: Always at the bottom left-hand corner of the player.

• Center: Always at the center of the player.

Domain-level privacy

With domain-level privacy, you can specify and manage up to 50 domains where your video can be embedded. Any sites that are not on your list will receive an error message when they attempt to embed it. 

To set up domain-level privacy:

1. Open the video settings page and select the Share button on the top-right of the page.
   
2. Select the Embed tab and open the dropdown menu under Embed privacy.
3. Select Specific domains. 
   
4. Add the domain names for the sites where you’d like your video to be embedded in the Allowed domains box.
   
5. Select the (+) button or hit the enter key on your keyboard to save them.
   
   

Interaction

Interaction tools––end screens, contact forms, chapters, and cards––help you connect with your viewers and can help drive engagement and conversions. These will appear in both the embedded player. To add these to your video, select your video from the Library and open the Interactivity tab on the right side.

Viewing presets

To apply the same custom embed settings to multiple videos, you can create a viewing preset under the Videos tab in your Account settings. See How to use embed presets to learn more.

Small embedded players

If your embedded video is less than 375px wide, some of the embedded elements will be hidden.

• Mini Mode is activated if the player is smaller than 375px wide. In Mini Mode, the portrait, volume slider, and Vimeo logo are hidden.
• Tiny Mode is activated if the player is smaller than 300px wide or 169px tall. In Tiny Mode, the portrait, title, control bar, Vimeo logo, Like / Watch Later / Share buttons, and end screens are hidden.
• If using a Custom Logo (Pro or Starter and above only): If you’re using a custom logo in the player, the criteria for Mini Mode and Tiny Mode are a bit different. Mini mode is activated when the player is smaller than 450px wide. Tiny mode is activated if the player is smaller than 338px or 190px tall.