Video

The Video component places one or more videos on the page. Videos can be uploaded to the site or come from YouTube or Vimeo. A single video in a single column plays right on the page; several videos (or several columns) become a grid of thumbnails that open a player in a lightbox.

What it is for

Tutorials, recorded talks, testimonials, a promotional clip. Use one Video component per group of related videos; the grid keeps them compact and lets visitors pick which to watch.

See it live on the example page APB Video, which also shows a single inline video.

Structure

• The Video component sets the grid (columns, gap) and the palette.
• Video Items — one per video, each pointing at a media item (uploaded file or remote URL) with an optional title and caption.

The two display modes are chosen automatically: inline player when there is exactly one item and one column; thumbnail grid with lightbox otherwise. The number of columns therefore also controls the thumbnail size — a single video in a 3-column grid shows as a small thumbnail.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro Text	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Columns	1 … 10	3	Thumbnails per row; 1 with a single item plays inline. See Columns and Column Gap.
Column Gap	0 … 60px	30px	Space between thumbnails.
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	— (required)	Color of captions and the play button. See Color Style.
Component Width	25% … 100%	100%	See Component Width. For an inline video, this is the easiest way to control the player size.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Video Item fields

Field	Required	What it does
Title	no	Caption above the description; also the lightbox title.
Video	no	A media item. Click Add media to upload an MP4 (media type Video) or paste a YouTube/Vimeo address (media type Remote video), or pick one already in the media library.
Description	no	Short caption under the thumbnail or player.
Description (admin)	no	Editor note; never shown.
Custom Class	no	Extra CSS class on this item.

How to use it

1. Click Add Video; set the Section Title and a Color Style.
2. For one video on the page: Columns = 1 and a Component Width of 60–80%. For a grid: Columns = 2–4.
3. Click Add new Video item, click Add media under Video, upload a file or paste a YouTube/Vimeo URL, and insert it. Add a Title and Description; click Create.
4. Repeat for other videos and save. Thumbnails for remote videos come from YouTube/Vimeo; for uploaded videos, set a thumbnail image on the media item.

Tips

• Prefer remote videos for anything longer than a minute; uploaded files are served by your site and slow it down.
• Give uploaded videos a good thumbnail in the media library; it is what visitors see in the grid.
• A video with text around it: use Overlay Content for a video behind a link, or a Simple Content region to place a Video component beside a paragraph.

For site builders

Item	Value
Module	apb_pb_video
Paragraph types	apb_pb_video, apb_pi_video
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Media, Media Library, Options, Taxonomy, Text; media types video (file) and remote_video (oEmbed), shipped by apbuilder
Own config	image style apb_pb_video_thumb
Shared vocabularies	apb_tax_columns, apb_tax_column_gap, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_video/frontend: Video.js for inline file playback, oEmbed iframes for remote videos, GLightbox for the grid. apb_pb_overlay_content depends on this module for its video field.
Permissions	Install grants view to anonymous and authenticated users only; grant create/update/delete on both bundles to your editor roles manually.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-video