Video Facade (shared partial)

A click-to-play poster for a YouTube, Vimeo or local video. Media and Ping Pong both include it, so no third-party player script loads until the visitor asks for the video.

Usage

Loading…

ReferenceTheming

Until it's clicked, a facade is a <button> showing a poster — the poster_image if one is set, YouTube's own thumbnail otherwise, or the shared placeholder. On click, video-facade.js swaps the button for the real player: an autoplaying <iframe> for YouTube (youtube-nocookie.com) and Vimeo, or a <video> with controls, and a captions <track> from caption_track_url, for a local file. With modal_target set it opens that Bootstrap modal instead of playing inline, which is how Ping Pong's "media in modal" works.

video_facade isn't placeable on its own in Canvas (noUi: true); components include it:

{% include 'ixm_blocks:video_facade' with {
  provider: 'youtube',
  video_id: youtube_id,
  poster_image: poster_image|default(null),
  title: caption|default(null),
} only %}

Props

Prop	Required	Type	Description	Example
provider	Optional	enum	YouTube, Vimeo or an uploaded video.	youtube, vimeo, local
video_id	Optional	string	The YouTube or Vimeo video ID.
video_url	Optional	string	Link to the uploaded video file.
poster_image	Optional	object or string	Image shown before the video plays.
mobile_image	Optional	object or string	Optional image shown on phones instead of the video.
title	Optional	string	Video title, read out by screen readers.
duration	Optional	string	Optional length, e.g. '2:41'.
modal_target	Optional	string	Open this pop-up instead of playing in place.

Activating it moves keyboard focus into the player that replaces it, so focus isn't dropped back to the top of the page when the button disappears. → Full accessibility guidelines

Tokens used by this component

Token	Default
--ixm-facade-btn-*	(several — see full reference)
--ixm-facade-scrim	rgb(6 18 24 / 22%)
--ixm-facade-scrim-hover	rgb(6 18 24 / 34%)
--ixm-facade-transition-duration	var(--theme-duration, 220ms)
--ixm-facade-transition-ease	var(--theme-ease, ease-out)

→ Full token reference