• Finalized

    • Adding a Video Banner using the Video Hero Template

    Owned by Melissa Chavira
    Last updated: May 25, 2023
    3 min read

    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 YouTube or Vimeo in the browser. It will be centered on the page and 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:

     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 web address. For example: //youtu.be/YhqVEg2ypIw. Learn how to find your Video URL 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.

     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 “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 “vimeo.com/” from the Link text field.

     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.

     Related articles