Embedding Background Video in Page Headers in Public Web WordPress

Adding a short video clip to the background of a page header can make a page more visually interesting. Headers with background video are ideal for high-profile pages.

Selection and preparation

Used sparingly, applying a background video in the page header can make our website feel lively and engaging. If overused, however, this header treatment can become distracting for the user—and cause our site performance to suffer. Not every page you create should use this treatment. Reserve it for high-profile pages such as campaign landing pages and the main page of other major sites.

Choose video clips that are free of text overlays and background signage. This will make it easier to view the page headline, body copy, or calls to action.

Avoid shots with excessive or fast-paced motion. Slow pans across, in, or out are ideal.

Use short clips. Header videos will continue to loop. The optimal length for header videos is between 8-15 seconds.

The two main video platforms BCIT uses are YouTube and Vimeo, and Vimeo is what we use for background header videos.

Each platform has its place in WordPress. YouTube works best for marketing because the platform offers robust analytics, search optimization, and shareability. YouTube is the standard platform to host videos for program pages, school sites, blogs, news stories, and campaign pages.

For background header videos, however, use Vimeo. These clips are different from marketing content. They are short. They loop and are free of visual effects. They also require less load time on the pages.

See the Knowledge Base article Embedding Videos in Public Website WordPress for more information.

IT Services manages a Vimeo account specifically for background videos. Contact techhelp@bcit.ca to upload a your video.

Adding a background header video to a page

Once your video has been published on Vimeo, you can add it to your page. To do so, you’ll need the Vimeo video web address.

In the WordPress Edit page:

Scroll down to the Page Hero Options sidebar, usually found just below the main content editing area.
- Note: Depending on your own past actions, this sidebar may have been moved to elsewhere on the Edit page or may be minimized by default. Although it can be moved, it cannot be removed, so if it isn’t below the main content editing area, just keep scrolling until you find it. If it is minimized, simply click on the small down triangle icon at the far-right-side to expand it again.
[Optional] If you’d like to display something other than the Page Title on the banner and/or if you’d like to add a tagline, enter them in the Hero Title and Hero Tagline fields.
[Optional] Add a static image (taken from the start of your video and sized to 1600 x 800 pixels) to the Hero Background Image.
- Note: This static image will be displayed while the video loads and buffers in the background, then replaced by the video once it’s ready. Adding this is optional but recommended, because otherwise the banner is merely plain and dark until the video finishes loading.
Paste the Vimeo video web address into the Hero Video URL field.
- Note: Ignore the Hero CTA as this option is not currently in use.
Preview your page to see the header background video in place and ensure it’s working as you expect.

If you require further assistance with this at any point in the process, email itshelp@bcit.ca.

Embedding Background Video in Page Headers in Public Web WordPress

Selection and preparation

When to use a video in a page header

Selecting a clip

Prepping your video

Hosting your video

Adding a background header video to a page

More information about using video and other digital media on the BCIT website

More information about working with public website WordPress