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 the appearance and interface text of the vertical video discovery experience to match your website's design. The Carousel and Full screen (inclusive of Single player) modes can be styled independently. Any interface text overrides apply to all modes.


Customize the vertical video feature

Follow these steps to customize each vertical video component:

  1. Update your stylesheet with your desired CSS and localization 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.


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

Setting 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;
}



Captions

.jw-vertical-video.jw-vertical-video-fullscreen .jw-vv-captions {
  color: rgba(255, 0, 0, 1);
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-shadow: 0 2px 1px #000;
  background-color: rgba(0, 0, 255, 0.5);
}
Setting Description
color Color of the caption text

To set the opacity, use RGBA format. Otherwise, use HEX format.
font-size Size of the caption text
font-family Typeface used for the caption text
text-shadow Visual effect applied to the edges of the text

Possible values:
  • (none - default)
  • 0 -2px 1px black (depressed)
  • 0 2px 1px black (dropShadow)
  • 0 0 5px black, 0 1px 5px black, 0 2px 5px black (raised)
  • -2px 0 1px black,2px 0 1px black,0 -2px 1px black,0 2px 1px black,-1px 1px 1px black,1px 1px 1px black,1px -1px 1px black,1px 1px 1px black (uniform)
background-color Color behind the text of the caption

To set the opacity, use RGBA format. Otherwise, use HEX format.



Fullscreen

🚧

Button layout position and button stack orientation cannot be customized through the vertical video CSS. These customizations must be made on the UX tab.

Setting Description & Code
Close Button Color
Sets the color of the close button 
div#jw-vertical-video-overlay .close-button {
    color: #001a00;
}
CTA Button: Hide Default SVG Icon
Hides the default SVG icon of the click-to-action (CTA) button 
.jw-vv-cta-button .jw-svg-icon-cta {
  display: none;
}

💡

If a CSS conflict occurs due to specificity, add !important to the declaration to ensure it takes precedence.

CTA Button: Insert SVG Icon
Inserts an SVG icon via pseudo-element for the click-to-action (CTA) button
The following example injects an arrow. 
.jw-vv-cta-button::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: green;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4l8 8-8 8' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

💡

If a CSS conflict occurs due to specificity, add !important to the declaration to ensure it takes precedence.

CTA Button: Override Styles
Override the styles of the click-to-action (CTA) button 
.jw-vv-cta-button {
  border: 3px red solid;
  color: blue;
  font-size: larger;
  background-color: yellow;
  font-family: "Times New Roman", Times, serif;
}

💡

If a CSS conflict occurs due to specificity, add !important to the declaration to ensure it takes precedence.

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;
}
Button Layout PositionCustomizations to the button layout position can be made on the UX tab.
Button Stack OrientationCustomizations to the button stack orientation can be made on the UX tab.
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;
}


Localization Reference

To localize individual labels, declare the associated CSS custom properties in your stylesheet. Each label is resolved independently, so labels without an override continue to use the selected interface language.

The vertical video discovery experience automatically selects a supported interface language by checking the page’s <html lang> attribute first and then the viewer’s browser language navigator.language. If neither value identifies a supported language, the interface defaults to English.

📘

Define the custom properties on :root before the placement initializes. Override values are literal text and are displayed regardless of the automatically selected language. Changes made after initialization do not update rendered labels.

 
:root {
  --jw-vv-play-sound: "Ton einschalten";
  --jw-vv-share: "Teilen";
  --jw-vv-next-video: "Nächstes Video";
}
CSS custom property Interface element Default text
--jw-vv-advertisement Ad label in the new UI Advertisement
--jw-vv-cta-more Default CTA button label More
--jw-vv-link-copied Share confirmation tooltip Link copied
--jw-vv-next-video Up-next card displayed during an ad Next Video
--jw-vv-now-playing Related video card status Now playing
--jw-vv-play-now Related video card status Play now
--jw-vv-play-sound Interactive mute button Play sound
--jw-vv-related-videos Related videos heading Related Videos
--jw-vv-resume-after-ad Related video card status Resume after ad
--jw-vv-share Share button aria-label Share
--jw-vv-sponsored Ad label in the old UI Sponsored
--jw-vv-swipe-for-more Mobile swipe hint Swipe up for more

Updated 18 days ago

Did this page help you?
© 2007- Longtail Ad Solutions, Inc.