Video Hero Unit Block

The Video Hero Unit block gives you the ability to have a looping video background for added visual representation of your department's message. You can use a video to show clips of the life of your program or even the process of helping a customer. The video will have no audio and embedded text is discouraged. 

Please keep in mind, there is a time and place for video and it shouldn't be used just because it's available. The Video Hero Unit block should be used wisely where it can be effective to help amplify your message; to show rather than tell the story of your department.

The video background added to the Video Hero Unit block is most effective when you use it to:

  • create a vibe,
  • to set a tone or
  • to induce an emotional reaction.

Note: Request the Video Hero bundle before you start the tutorial. Since the Video Hero bundle is part of the Request bundles group, when you request this bundle, our team will work with you to ensure the video you plan to use is optimized for a quality display.

Demo: Video Hero Unit Block

1

Create Video Hero Unit Block

  1. Go to the Shortcuts toolbar and select Blocks.
  2. Click on Add Block at the top of the page.
  3. Select Video Hero Unit from the list of options.
2

Configure Video Hero Unit Block

  1. Label: a name used to uniquely identify the block.
  2. Title (optional): this displays above the Video Hero Unit block when placed on a page.
  3. Text Tab:
    1. Headline (optional): large text displayed on top of the block.
    2. Text (optional): small text displayed on top of the block.
    3. Link (optional): text and URL (can have several); will be displayed as buttons.

      Label, title and text tab
  4. Video/Design Tab:
    1. Vimeo.com Video ID (required): videos approved by Office of Strategic Relations and Communications only.
    2. Background Image (required): this image should be the same aspect ratio as the video files and will be displayed while the video loads and on smaller screens.
    3. Video Background Overlay (required): add a semi-transparent overlay to the video to make the text easier to read. Choose to hide or show the overlay.
    4. Text Color: choose a color that contrasts with your graphic.
    5. Link Color: this is the button color. Choose a color that contrasts with your graphic.
    6. Text Align: align your text left, right, center, left half or right half.
    7. Size: choose Small, Medium, Large, or Full (the height of the users browser window). This choice affects video size. 

      Video/Design tab
  5. Click Save.
3

Place Video Hero Unit Block

Related: How to Place Blocks

Related Articles