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

Vertical Video Customization Reference

Discover the available vertical video UI customizations

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 enables you to customize elements such as button colors, title color, and backgrounds to align the player with your site's design.


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);
}
SettingDescription
color

Color of the caption text



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

font-sizeSize of the caption text
font-familyTypeface 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
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.
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;
}
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;
}
Top Offset
Offsets the fullscreen view from the top of the page to keep a site header visible 
:root {
  --jw-vv-fullscreen-top: 64px;
}

Accepts any of the following:

  • Non-negative CSS length, using units such as:
    • em
    • px
    • rem
    • vh
  • CSS expression, using one of the following functions:
    • calc()
    • clamp()
    • max()
    • min()

NOTES: Unitless numbers, percentages, and negative values are ignored. Browsers without dvh support (such as Chrome versions earlier than 108) ignore this setting.

Default: 0


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 propertyInterface elementDefault text
--jw-vv-advertisementAd label in the new UIAdvertisement
--jw-vv-captionsCaptions button accessibility labelCaptions
--jw-vv-captions-offTurn captions off button accessibility labelTurn captions off
--jw-vv-captions-onTurn captions on button accessibility labelTurn captions on
--jw-vv-closeClose button accessibility labelClose
--jw-vv-close-menuClose menu button accessibility labelClose menu
--jw-vv-cta-moreDefault CTA button labelMore
--jw-vv-fullscreenFullscreen button accessibility labelFullscreen
--jw-vv-link-copiedShare confirmation tooltipLink copied
--jw-vv-muteMute button accessibility labelMute
--jw-vv-next-videoUp-next card displayed during an adNext Video
--jw-vv-now-playingRelated video card statusNow playing
--jw-vv-pausePause button accessibility labelPause
--jw-vv-playPlay button accessibility labelPlay
--jw-vv-play-nowRelated video card statusPlay now
--jw-vv-play-soundInteractive mute buttonPlay sound
--jw-vv-previous-videoPrevious video button accessibility labelPrevious Video
--jw-vv-related-videosRelated videos headingRelated Videos
--jw-vv-resume-after-adRelated video card statusResume after ad
--jw-vv-settingsSettings button accessibility labelSettings
--jw-vv-shareShare button aria-labelShare
--jw-vv-sponsoredAd label in the old UISponsored
--jw-vv-swipe-for-moreMobile swipe hintSwipe up for more
--jw-vv-unmuteUnmute button accessibility labelUnmute

Updated 3 days ago

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