Help Center

Menu

The information on this page relates to beta testing within the DXP

This documentation includes information for selected beta testers within the DXP. DO NOT use this unless you have been instructed to do so.

Video modal (secondary color pattern)

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

The component provides a teaser image, 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 (secondary color pattern) Squiz core component within the component browser and then click the Select button.

    video modal secondary component select

  3. This will add the video modal (secondary color pattern) component to your page.

Configure the video modal component

video modal secondary fields

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

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

  3. The add_circle Add button allows you to add up to two buttons. See Teaser links settings for information on configuring the button fields.

  4. This is the URL to the video.

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

  5. (Optional) Supplementary information about the video such as a short description, transcripts and any related information.

  6. Specify the positioning of the text: left side, right side.

  7. (Optional) This allows you to add a unique ID into the HTML markup to the instance of the component so that you can add custom styling and functionality using CSS and javascript respectively.

  8. (Optional) This allows you to add a class into the HTML markup to the instance of the component so that you can add custom styling and functionality using CSS and javascript respectively.

Add up to two teaser links that are displayed below the formatted content.

video modal cta button fields

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

  2. Choose between linking to a Matrix asset, or a user-defined link.

  3. 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 to which your card links.

    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. This controls how the link is opened when you click it. For example, open in a new page. allows you to provide some descriptive text/links/images for your video, such as a transcript.