Customize your branded sharing page with HTML and CSS

A sharing page allows you to deliver videos to your audience on a dedicated, branded, and distraction-free page. Using the sharing page code editor in Vidyard, add HTML and CSS to customize the page and create a unique, branded viewing experience.

Below you'll find information to help you get started:

• Out-of-the-box sharing page templates to help you get started with a sleek design
• Reference your own external CSS file
• Customize the existing HTML and CSS of key elements on the sharing page (title, background color, logo container, etc.)

Get started with sharing page templates

Below you'll find some simple, but effective templates to help you get started with the design of your sharing page. Think of these as a starting point to build your brand's look and feel.

1. Open the code editor for the sharing page that you want to customize
2. Select a template below and copy the code into the header, footer and CSS boxes within the sharing page editor.
   • You'll find step-by-step instructions in the HTML comments to help you match your own branding.

3 Card - Light Version

• Learn how to make a 3-card sharing page

No Cards - Light Version

• Learn how to make a minimal sharing page with no cards

3 Card - Dark Version

• Learn how to make a dark version of the 3-card sharing page

No Cards - Dark Version

• Learn how to make a dark version of a minimal sharing page with no cards

Reference your own external CSS files

While Vidyard does not support use of the <link> attribute in the Header and Footer code editors (see our list of supported HTML tags and attributes for reference), you can use the Javascript editor to add your own unfiltered HTML or use the @import rule to reference your style sheet in the CSS editor. Make sure to use an absolute reference to your stylesheet, starting with http or https.

Example: @import url("https://mywebsite.com/mystyles.css")

Adjust existing HTML and CSS on the sharing page

Using CSS, you can target various HTML elements on the sharing page and adjust their properties. These properties include font styles, colours, margins between objects and aligning text.

The table below provides a guide for the HTML elements, and some CSS suggestions if you are starting from scratch.

.header-logo-container {
display: none!important;
}

body {
      font-family: 'Open Sans', sans-serif; /*Sets font for the page*/
      color: #333333; /*Sets font color for the page*/
}

#name-header h1 {
       font-family: 'Open Sans',sans-serif; !important;/*If specific font for the player title*/
       font-weight: 400; !important;/*The higher the number, the more bold*/
       font-size: 22px; !important;/*Set size of the title*/
       color: #333333; !important;/*Set font color of the title*/
}

#name-header {
        padding-bottom: 12px; /*Sets the margin between title and player*/
}

#sharing-description {
       color: #333333; /*Specific colour for the player/video description*/
       text-align: center; /*Aligns the description centred when ON*/
}

 #logo-container {

        display:none; /*Use if you are not displaying your logo under the player*/

}