Articles in this section

See more

Customizations on Vimeo OTT

  • Updated

CSS is a coding language that allows you to add styles to customize the look and feel of your website. If you have someone on your team who is code-savvy, you can add CSS to your Vimeo OTT website in the Custom Styles section in the sidebar of your theme editor to customize the look and feel of your Vimeo OTT site.  

It is important to note that custom CSS falls outside the scope of our support. This means that we will be unable to help further with setup or troubleshooting, and cannot guarantee its full functionality if you implement the code. This includes how it functions with our website themes, particularly how it appears on mobile devices. It’s your responsibility to maintain your CSS, should it be impacted by future updates on our platform. 

If you have questions about supporting options for Enterprise customers, reach out to our Sales team. If you are already an Enterprise customer, reach out to your Account Manager.

In this article

How do I use CSS?

If you’re new to CSS but want to move ahead with using it to make some visual customizations to your OTT site, we’ve compiled some helpful resources to help you learn.

CSS selectors define the elements to which your CSS rules apply. You’ll need to identify your CSS selectors to customize your Vimeo OTT site. 

For a full list of available selectors in CSS, check out this W3School resource.

To apply CSS to your Vimeo OTT website, log in, then navigate to your theme editor by selecting "Site" from the Settings menu. Once there, click "Themes" on the left-hand sidebar, then click "Choose theme" and then "Edit theme."

Once you’re in editing mode, scroll to the Custom Styles section in the sidebar on the left, and add your CSS. Don’t forget to save your work. 

Please note: If you change your website theme to a new template, your CSS will not save.

To see how we identify elements and apply specific CSS in Vimeo OTT, watch this video:

 

Common customizations

Please note you should replace the selector for each of these rules with a selector from your site.

Resizing buttons

To resize an element, try using a “width” rule.

Updating the Trailer button size:

basic.pngtrailerbuttonsize.png

This is the CSS:

.secondary-actions a.btn-transparent {
  width: 150%;
}

 

Resizing fonts

To resize fonts, use a font-specific “font-size” rule. The font-size rule accepts many different units. You can read about the purposes of each in this guide.

Increasing the font size of the title:

basic.pngincreasetitle.png

This is the CSS:

h1.gigantic.uppercase {
  font-size: 5em;
}

 

Adding colors to an element

To add color to an element, use a “color” rule. You can use a few different formats for the value, which you can read about here.

Making the Start Watching button text blue:

basic.pngbluebuttontext.png

This is the CSS:

.primary-actions a.btn-brandon {
  color: blue;
}


Adding colors - background

To add a background color, use a “background-color” rule.

Making the button’s background color red:

basic.pngredbutton.png

 

This is the CSS:

.primary-actions a.btn-brandon {
  color: blue;
}

 

Hiding elements

To hide something added by default, use a “display” rule.

Removing both hero buttons:

basic.png

removebuttons.png

This is the CSS:

.row-actions {
  display: none;
}


Custom fonts

You can select from a list of Custom Fonts (including ~100 of the most popular Google fonts) in the Theme Editor to be applied across your site. If the font you'd like to use is not on that list, we recommend choosing another available font from Google Fonts. You'll start by selecting your font and style and Google will give you instructions on how to add it to your site - click import to get a CSS rule for adding the font’s styles to your page. Here is an example:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

Once imported, add a CSS rule to add it to the fonts on your page. Here is an example:

h1,h2,h3,h4,h5,h6,p,span,div,a,strong, .site-font-primary-color {
  font-family: 'Roboto', sans-serif !important;
}
Please note: Using a universal selector (*) should be avoided. For best results, we recommend listing each of your selectors. 

 

Page-specific styles

While the pages of your OTT site will be using the same base template, you can also add styles for specific page types. For example, you can add a parent selector to your selector to limit a rule to collection pages exclusively. 

The <body> element on your OTT pages will have a class specific to that page. The collection pages are “.collections”, so add “body.collections” when you write your rule and before your selector to limit it to specific collection pages. Here is an example:

body.collections .custom-btn-action-share {
  display: none;
}

 

Customizations across different browser sizes

We cannot guarantee full functionality across browser sides if you implement the code. However, we can provide a suggestion on how to tweak styles across browsers: you can wrap your CSS rules in a media query. Here is an example:

@media only screen and (max-width: 640px) {
  .hero-short-desc {
    display: none;
  }
}

 

What can’t be changed

While CSS is a great tool for styling, not all components can be modified. Some components of the website are not able to be stylized with CSS, including the checkout page and the video player.

 

Avoid using Universal Selectors

Universal selectors can cause issues with specific forms and pages used across your site. They are used by the * symbol. We recommend listing each of the selectors you would like to be used.
AVOID THE FOLLOWING EXAMPLE:
* {
  key: value
}
 
Instead, use the following:
 
h1,h2,h3 {
  key: value
}
 

Related articles