Users can further customize the appearance of their Watches using the "Custom Watch CSS" feature in the Advanced tab of Watch settings.
Custom Watch CSS can be used to define visibility and opacity for some of the Watch elements. The complete list of these elements is provided below. Note that you can customize Main, Channel, Search, and Player page attributes independently.
Currently, only "display", "visibility" and "opacity" tags are supported, and only for the attributes listed.
The Watch elements that can be customized via CSS are marked with "data-a" attributes in the Watch page in DevTools window of your browser as demonstrated here:
Here is an example of hiding a "some attribute" element marked with "data-a":
[data-a="some attribute"] {
display: none;
}The full list of data-a attributes is provided in the section List of data-a attributes below.
Note
CSS customization applies to the watches in External environments (on the customer's side) and it doesn't work inside Video Manager.
Hint
CSS changes can be seen in Watch Preview if the External option is chosen there.
Warning
Only "display", "visibility", and "opacity" CSS tags are currently supported for Watch customization.
Using any other tags may lead to incorrect Watch display and behavior.
Examples
Example 1.
The following code hides all channel titles (data-a="channel-title") on all the Watch pages.
[data-a="channel-title"] {
display: none;
}Before
After
Example 2.
The following code hides channel titles (data-a="channel-title") on the Watch Channel pages only. It doesn't affect channel titles on the Main page.
[data-a="page-channel-view"] [data-a="channel-title"] {
display: none;
}Before
After
Example 3.
The following code hides channel titles for the channels of the type "With background" (data-a="channel-type-inline").
[data-a="channel-type-background"] [data-a="channel-title"] {
display: none;
}Before
After
List of data-a attributes
Main page
page-channel-list (OPTIONAL)
channel-type-default (OPTIONAL)
channel-title
channel-title-view-all
channel-description
video-title
video-date-time
video-duration
video-description
}
channel-type-background (OPTIONAL)
channel-title
channel-title-view-all
channel-description
video-title
video-date-time
video-duration
video-description
}
channel-type-inline (OPTIONAL)
channel-title
channel-title-view-all
channel-description
video-title
video-date-time
video-description
video-duration
player-video-wrapper
player-gradient
player-button
play-indicator
social-statistic
social-buttons
}
}
Channel page
page-channel-view (OPTIONAL) {
channel-title
video-title
video-description
video-date-time
video-duration
}
Search page
page-search (OPTIONAL) {
video-title
video-description
video-date-time
video-duration
search-back-button
search-filter-group
search-filter-button-time
search-filter-button-duration
video-duration
video-title
video-date-time
video-describes
social-statistic
video-describes
}
Player page
page-player-view (OPTIONAL) {
channel-title
page-player-main-info {
video-title
video-date-time
video-description
video-duration
social-buttons
social-metric-like-icon
social-statistic
video-describes
}
tab-playlist {
video-title
video-date-time
video-description
video-duration
play-indicator
}
}