Overlay Content

Overlay Content holds pieces of content that are invisible on the page until a link opens them in an overlay window: a video with an introduction, a long explanation, a form of words you do not want in the main flow. You create the link yourself, anywhere in your text, and connect it to the item by a short Trigger ID.

What it is for

Use it when a page needs “more” behind a word or a button without navigating away: a tutorial video behind “Watch the video”, speaker details behind a name, a definition behind a term. Because the trigger is an ordinary link, it can live in the page Body, in a Simple Content text, in a menu, or in another component’s rich text.

See it live on the example page APB Overlay Content, which also lists the steps summarised below.

Structure

• The Overlay Content component is a container with only a Section Title (for your own reference; the component renders nothing visible).
• Overlay Video Items — one per overlay. Each has a Trigger ID, a Title, an optional Video and two optional text blocks (before and after the video).
• A trigger link — any link on the same page whose address is # followed by the Trigger ID, for example #about-us-video.

The component is deliberately simple: it has no layout settings, no width, no container settings and no placement — it does not occupy space on the page.

Component settings

Setting	What it does
Section Title	Label for editors; not shown to visitors.
Overlay Content Items	The list of overlays.

Overlay Video Item fields

Field	Required	What it does
Trigger ID	yes	A short identifier without spaces or special characters (letters, digits, - and _), typed without the #. It must be unique on the page. Example: about-us-video.
Title	yes	Heading of the overlay. It is displayed only when Text Before or Text After is filled in; a video-only overlay shows just the player.
Overlay Video	no	A media item: uploaded video or YouTube/Vimeo URL. Leave empty for a text-only overlay.
Text Before	no	Rich text shown above the video.
Text After	no	Rich text shown below the video.

How to use it

1. Decide on a Trigger ID, for example campus-tour.
2. In the text where the overlay should open from, insert a link and set its URL to #campus-tour (with the #).
3. In the Page Builder, click Add Overlay Content (one per page is enough; it can hold many items).
4. Click Add new Overlay Video Item. Type campus-tour as the Trigger ID, a Title, and add the Video and/or texts. Click Create.
5. Save the page and click the link: the overlay opens; the × button or a click outside closes it.

Tips

• Trigger IDs are case-sensitive and must match exactly; if nothing opens, compare the link address and the ID letter by letter.
• Several links can point to the same Trigger ID.
• Remote videos start when the overlay opens and stop when it closes. Uploaded videos need a poster image on the media item to look good before play.
• For overlays attached to entries of a list, the Links component (Content Overlay link type) needs no manual link.

For site builders

Item	Value
Module	apb_pb_overlay_content
Paragraph types	apb_pb_overlay_content, apb_pi_overlay_video
Requires	apbuilder, apb_pb_video (shares the video item field), Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Media, Media Library, Text; media types video and remote_video
Front-end	apb_pb_overlay_content/frontend: each item renders a hidden inline panel; clicks on a[href="#trigger-id"] open it with GLightbox. JSON for integrations: /apb/overlay-content/item/{paragraph}.
Container settings	None (by design, v1 parity).
Example page	/apbuilder_examples/apb-overlay-content