Help Center

Menu

Video modal

Use the video modal component to display a YouTube or Vimeo video within a modal (pop-up) on your web page.

The component provides a teaser image, and accompanying text and call-to-action links. When the teaser is clicked the video opens in a modal.

Add the component to your page

When you are editing your page using page-builder:

  1. Add a component to your page by clicking the widgets Add component button or by adding a content block (by clicking the add_circle button) then clicking the add component button.

  2. Locate the video modal Squiz core component within the component browser and then click the select button.

    video modal component select

  3. This will add the video modal component to your page.

Configure the video modal component

Teaser content settings

The teaser settings control how the component appears in your body content when the modal is not displayed. It can be used to provide a teaser/preview image and some accompanying content.

video modal fields

  1. Image: (Optional) Choose an image that you have already uploaded to the CMS to display as a thumbnail or teaser image for the video.

  2. Content: Supporting content for the teaser, displayed alongside the video.

  3. Add: The add_circle Add button allows you to add up to two buttons. See Call-to-action button settings for information on configuring the button fields.

Call-to-action button settings

Add up to two call-to-action links that are displayed below the formatted content.

video modal cta button fields

  1. remove_circle: Click this to remove the selected button from your teaser.

  2. Call-to-action button - Link type: Choose between linking to a Matrix asset, or a user-defined link.

  3. Call-to-action button - Link: Depending on what link type you select you will see one or two fields to specify your link.

    • Call-to-action button - Matrix asset: This is displayed for Matrix asset picker links and allows you to choose the CMS page that your card links to.

    • Call-to-action button - Text: This is displayed for user-specified links and defines the link text.

    • Call-to-action button - URL: This is displayed for user-specified links and defines the link URL.

  4. Call-to-action button target: This controls how the link is opened when you click on the link. (e.g. open in a new page)

Video content settings

These settings configure the video to display.

video modal content fields

  1. Video link: This is the URL to the video.

    The link must be a YouTube or Vimeo link to the video page.

  2. Additional content versions: (Optional) This field allows you to provide some descriptive text/links/images for your video, such as a transcript.

Video model display configuration

The display configuration provides some additional settings that control the layout and display of the component.

video modal display fields

  1. Theme: This selects the theme to apply to the component.

  2. Content position: This controls how the text is positioned within the component.