Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

The Video Background visual element can be previewed on our Demo website. It is only available on the Homepage Video Header Template. The template includes a video background, heading and a lightbox video popup that plays a video from You-Tube or Vimeo in the browser. It will be centered on the page the safe area will be 160px from the top and bottom. The width will be the full width of the video.

The contents of this article apply to Theme 4v1.1

In this section:

\uD83D\uDCD8 Create the Video Hero

  1. From the Content tab, scroll down to the Display Video Header and Popup? option. By default this option should be selected.

  2. The Video Banner group will include demo content.

  3. Click to expand the Video Banner group.

  4. Enter the Video ID. The Video ID is used for the background video. Video's by default will be set to autoplay and muted. ➡️ Learn how to find your Video ID below.

  5. Enter in the background video Source Type. Background videos can be included from YouTube or vimeo. The source type is case sensitive and should be entered in exactly as included below.

    1. For YouTube, enter you-tube

    2. For Vimeo, enter vimeo

  6. Include Video URL for lightbox. The lightbox video will load after the user clicks on the play video button. You must include the video URL without the "https:" from the URL from the web address. For example: //youtu.be/YhqVEg2ypIw. ➡️ Learn how to find your Video ID below.

  7. Add a banner heading. Banner headings are left aligned.

  8. Include additional content if desired. Additional content is not required.

Don’t forget to click Preview Draft. After previewing the draft, click Submit to save the page to CMS and then Publish.

\uD83D\uDCD8 Locating a Video ID

For YouTube Videos

  1. Visit youtube.com and locate a video you would like to use as your background.

  2. You can find the Video ID in two locations.

    1. From your web browser address bar. The Video ID will be the collection of letters, numbers and characters after the = sign.

    2. From the Share button. The Video ID will be the collection of letters, numbers and characters after the “youtu.be/”

For Vimeo Videos

  1. Visit vimeo.com and locate a video you would like to use as your background.

  2. You can find the Video ID in two locations.

    1. From your web browser address bar. The Video ID will be the collection of letters, numbers and characters after “vimeo.com/”

    2. From the Share button. The Video ID will be the collection of letters, numbers and characters after the “vimeo.com/” from the Link text field.

\uD83D\uDCD8 Locating a Video URL

  1. Visit youtube.com or vimeo.com and locate a video you would like to use for the lightbox.

  2. Click the Share button.

  3. Copy the link.

  • No labels