Design your video hub
Videos Hubs allow you to showcase a collection of videos in a set of branded, distraction-free webpages. Using the hub design options in Vidyard, you can adjust the layout, style, and overall experience of your hub.
- Start simple: choose page layouts, upload a company logo, and add links to social channels.
- Take your design a step further: add HTML and CSS for a unique look or to match the style of your company website.
Select a hub to design
- From the Vidyard dashboard, select Channels > Hubs
- Click on Edit next to the hub you want to design
Choose the layout of your hub pages
Layouts determine how videos are organized on the various pages of your hubs—whether that's the main landing page, a category of videos, or search results. Choose the layout that best suits the purpose of your hub.
- Under the Design tab, click on Page Layouts
- Use the tabs to select a layout for each page of the hub
- Click Save Changes
Add branded elements to your hub
Upload a logo and favicon
- Under the Design tab, select Images
- Click on Upload to select a file for a logo and favicon
- The logo is added to the header, beside the name of your hub. Supported file types include:
.png,.jpeg,.jfif, or.gifformats (max 3MB in file size)
- The favicon is an image added to the page's tab in your viewer's browser (recommended size: 32x32 or 16x16
.icofile).
- The logo is added to the header, beside the name of your hub. Supported file types include:
Link visitors to your social channels
Adding links to your social channels keeps visitors focused on your brand and offers the opportunity to engage with your company across the web.
An icon for each of the social channels that you add will appear in the header of the hub.
- Under the Design tab, select Social Links
- Enter the web address for each of your relevant social channels
- Click Save Changes
Manage advanced hub settings
Advanced settings offer you more control over how visitors interact with your hub. Do I want visitors to be able to search for videos on my hub? Do I do want visitors to download videos or embed them elsewhere?
- Under the Design tab, select Advanced Settings
- Toggle each setting to ON or OFF
- Click Save
| Setting | Description |
| Search bar in header | Adds a search bar to the header of the page. Allows viewers to search for videos in your hub by title or any tags that you've applied. |
| Show related videos | Show related content on the video page. Videos in the same category on your hub are shown first, then videos with the same tags. |
| Allow video embedding | Adds a button on the video page that allows visitors to copy the video's embed code. |
| Allow video downloads |
Adds a button next to each video that allows visitors to download the source file(s). If the video has any security settings enabled, the source files will be unavailable. |
Style your hub with HTML and CSS
The Hubs Code Editor allows you to customize the design of your hub with HTML, CSS, and JavaScript. See our list of supported HTML tags and attributes.
The code editor does not support inline styling, so make sure to add all styling to the CSS portion of the editor.
- From the Vidyard dashboard, select Channels > Hubs
- Under the Design tab, select Code Editor
- Click on Edit
- If necessary, click on Allow JavaScript to access code editor fields that accept JS
- Click on the Preview button to review any changes in a new tab
Next steps
- Add videos to your hub and organize them into categories
- Add security to your hub with IP whitelists, hub users, or SSO
- Set up hub integrations, including tracking scripts, Disqus and Drift