Vertical Video Customization Reference ᴮᴱᵀᴬ
Discover the available vertical video UI customizations
You can customize and modify elements of the vertical video feature to seamlessly integrate it with your website's design. The vertical video feature has two components: carousel and fullscreen. Each component can be uniquely customized.
Customize the vertical video feature
Follow these steps to customize each vertical video component:
- Update your stylesheet with your desired carousel and fullscreen CSS customizations through one of these approaches:
- Existing Stylesheet: Add the necessary overrides to your current website stylesheet.
- New Stylesheet: Build a new stylesheet with the required customizations.
- Add a reference to your chosen stylesheet in the
<link>
element within the<head>
section of your HTML pages.<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="custom_style.css"> </head> <body>...</body> </html>
This will enable you to adjust elements such as button colors, title fonts, and backgrounds, ensuring the player aligns with your site’s style.
Customization CSS Reference
The following sections explain how to customize UI elements of the vertical video components.
When customizing these components, be mindful of the following:
- Only modify the vertical video element properties listed.
- Avoid adding other styles to the provided CSS selectors.
- Use
!important
sparingly, as overuse can lead to unintended style conflicts.
Carousel
Settings | Description & Code |
---|---|
Carousel Background Color | Sets the background color of the carousel
|
Description Color | Sets the color of the description text
|
Navigation Button Background Color & Color | Sets the background color and color of the navigation button
|
Navigation Button Icons | Customizes the existing navigation icons OR defines custom navigation iconsSets the color of the existing button icons
OR Sets custom button icons and their colorsTo change navigation icons, include a reference to the icon font in the For example, follow these steps to use the free Font Awesome 6 library:
|
Play Icon Color | Sets the color of the play icon
|
Time Indicator Color | Sets the color of the time indicator
|
Title Color | Sets the color of the title text
|
Video Border Radius | Sets the radius of the video border
|
Fullscreen
Settings | Description & Code |
---|---|
Close Button Color | Sets the color of the close button
|
Description Color | Sets the color of the description text
|
Mute Button Color | Sets the color of the mute button
|
Navigation Button Background Color | Sets the background color of the navigation button
|
Navigation Button Background Color Disabled State | Sets the background color of the navigation button (disabled state)
|
Navigation Button Icons | Customizes the existing navigation icons OR defines custom navigation iconsSets the color of the existing button icons
OR Sets custom button icons and their colorsTo change navigation icons, include a reference to the icon font in the For example, follow these steps to use the free Font Awesome 6 library:
|
Play/Pause Icon Color | Sets the color of the play/pause icon
|
Timer Color | Sets the color of the timer
|
Title Color | Sets the color of the title text
|
Updated 13 days ago