Platform DocsPlayers DocsRelease Notes
Support Guides
System StatusSubmit a CaseDashboard LoginCompany Site

Vertical Video Customization Reference ᴮᴱᵀᴬ

Discover the available vertical video UI customizations

Suggest Edits

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:

  1. 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.

  1. 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 
div#jw-vertical-video .carousel-wrapper {
    background: #ffeecb;
}
Description Color
Sets the color of the description text 
div#jw-vertical-video .player-wrapper .jw-title-secondary.jw-reset-text {
    color: #007399;
}
Navigation Button Background Color & Color
Sets the background color and color of the navigation button 
div#jw-vertical-video .navigation-button {
    background: #f1cc80;
    color: #8a6e34;
}
Navigation Button Icons Customizes the existing navigation icons OR defines custom navigation icons

Sets the color of the existing button icons 
div#jw-vertical-video .navigation-icon {
    color: #001a00;
}

OR

Sets custom button icons and their colors

To change navigation icons, include a reference to the icon font in the <head> section, and set the icon unicode as content in the CSS selector.

For example, follow these steps to use the free Font Awesome 6 library:

  1. Add the CDN link inside the <head> section.

    <!DOCTYPE html>
<html>
    <head>
        <!-- Your other meta tags and styles here -->
        <link rel="stylesheet" href="custom_style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
    </head>
    <body>
        <!-- Your body content here -->
    </body>
</html>

  2. Set the icon unicode and color in the CSS.

    div#jw-vertical-video .navigation-icon {
    display: none;
}
  
div#jw-vertical-video .swiper-button-prev::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f100";
    color: #001a00;
}
  
div#jw-vertical-video .swiper-button-next::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f101";
    color: #001a00;
}
Play Icon Color
Sets the color of the play icon 
div#jw-vertical-video .play-button {
    color: #008080;
}
Time Indicator Color
Sets the color of the time indicator 
div#jw-vertical-video .time-indicator {
    color: #009999;
}
Title Color
Sets the color of the title text 
div#jw-vertical-video .player-wrapper .jw-title-primary.jw-reset-text {
    color: #002e4d;
}
Video Border Radius
Sets the radius of the video border 
div#jw-vertical-video .carousel-item {
    border-radius: 15px;
}
div#jw-vertical-video .player-wrapper::after {
    border-radius: 15px;
}



Fullscreen

Settings Description & Code
Close Button Color
Sets the color of the close button 
div#jw-vertical-video-overlay .close-button {
    color: #001a00;
}
Description Color
Sets the color of the description text 
div#jw-vertical-video-overlay .vertical-video-element .jw-title-secondary.jw-reset-text {
    color: #008000;
}
Mute Button Color
Sets the color of the mute button 
div#jw-vertical-video-overlay .mute-button {
    color: #001a00;
}
Navigation Button Background Color
Sets the background color of the navigation button 
div#jw-vertical-video-overlay #vertical-btns-container > button {
    background: #ccffcc;
}
Navigation Button Background Color Disabled State
Sets the background color of the navigation button (disabled state) 
div#jw-vertical-video-overlay #vertical-btns-container > button:disabled {
    background: #e6ffe6;
}
Navigation Button Icons Customizes the existing navigation icons OR defines custom navigation icons

Sets the color of the existing button icons 
div#jw-vertical-video-overlay #vertical-btns-container > button::before {
    border-color: #001a00;
}

OR

Sets custom button icons and their colors

To change navigation icons, include a reference to the icon font in the <head> section, and set the icon unicode as content in the CSS selector.

For example, follow these steps to use the free Font Awesome 6 library:

  1. Add the CDN link inside the <head> section.

    <!DOCTYPE html>
<html>
    <head>
        <!-- Your other meta tags and styles here -->
        <link rel="stylesheet" href="custom_style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
    </head>
    <body>
        <!-- Your body content here -->
    </body>
</html>

  2. Set the icon unicode and color in the CSS.

    div#jw-vertical-video-overlay #vertical-btns-container > button::before {
    display: none;
}

div#jw-vertical-video-overlay .goUpBtn::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f102";
    color: #001a00;
}

div#jw-vertical-video-overlay .goDownBtn::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f103";
    color: #001a00;
}
Play/Pause Icon Color
Sets the color of the play/pause icon 
div#jw-vertical-video-overlay .play-pause-button {
    color: #e68a00;
}
Timer Color
Sets the color of the timer 
div#jw-vertical-video-overlay .timer {
    color: #e68a00;
}
Title Color
Sets the color of the title text 
div#jw-vertical-video-overlay .vertical-video-element .jw-title-primary.jw-reset-text {
    color: #004d00;
}

Updated 16 days ago

© 2007-2024 Longtail Ad Solutions, Inc.