Skip to main content

On April 3rd, 2017 Vidyard will be switching to a new user interface. Click here to learn more.

Vidyard Knowledge Center

Style your Video Hub with CSS

Video Hubs can be a powerful branding tool and a great way to display your videos but we know it can be tricky to design a hub that accurately represents you. We have created some pages that may be of assistance when branding your Video Hub using CSS.

Check out the headings below for some examples of CSS custom branding for your hubs.
Note: There are limits for the amount of HTML and CSS can be added. Attempting to add more than 65kb of data to any one of the Header HTML, Footer HTML, or CSS will likely result in being unable to save your code. 

To access the Hubs CSS editor: 

  1. From the Channels menu, click Video Hubs
    Video hubs in the Channels menu
     
  2. Click Edit next to the Hub you want to style. 
    Edit the Hub you want to style
     
  3. Click Design
    Design tab.
     
  4. Click Launch Editor
    Launch editor
     
  5. Enter your CSS and HTML styling in the editor at the bottom of the page. 
    Note: The Video Hub Editor doesn't support javascript or jQuery. 
    Note: The HTML and CSS entered into the Hub Editor must be less than 65KB combined.
  6. HTML and CSS Editor
     
  7. Click Save when you're done. 

What you can style with CSS in your Video Hub: 

Backgrounds

#hub-container {
  background-color: red; }

Hub container background colored red

body {
 background-color: red; }  

Body background colored red

Player Titles and Descriptions

#category-sliders .player h4.title{
  color: red; } 

Red heading 4 text 

#video-details h2 {color: red;} 

Heading 2 red 

#category-sliders .player .player-metadata {background-color: red;} 

 Player metadata background is red

#video-details p.video-description{color: red;} 

Video details is red

Hub Title and Banner

#banner { background-color: red; } 

 Red banner

#banner-brand #banner-title { background-color: red;} 

 Title banner is red

Search Bar Customizations

#banner-search-form .input-group, #banner-search-form .form-control, #banner-search-form .btn {background-color: red;}

Search bar background is red

Categories

#category-sliders {background-color: red;}

 Category background color is red

#category-sliders .category-name {background-color: red;}

 Category name background is red

#category-sliders .category-name .stats .count { color:red; }

 Video counter is red

.btn-default { color: red;} 

View all button is red

Hubs with Related Videos

#category-grids #related-players { background-color: red; } 

Related players background is red. 

#related-players h3.show-section-header { color: red; } 

 Related players (heading 3) title text is red.

#related-players .related-player h4.title {color:red;} 

 Heading 4 under related videos is red

  • Was this article helpful?