Skip to main content

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

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:

  1. 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.
      Minimized page hero options sidebar, with the expand arrow highlighted with a red circle
  2. [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.
    Page Hero Options sidebar showing entries in the Hero Title and Hero Tagline fields
  3. [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.
  4. Paste the Vimeo video web address into the Hero Video URL field.
    Page Hero options sidebar content, specifically the hero background image showing a selected static image and the hero video URL field with a vimeo link filled in

    • Note: Ignore the Hero CTA as this option is not currently in use.
  5. 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 techhelp@bcit.ca.

More information about working with public website WordPress