Photo Video Block
Renders a full-viewport-height hero block with either a looping background video or a static background image. A centered floating card overlay displays the title and rich text copy. When a video URL is provided, the component renders a muted autoplay video with a Play/Pause toggle button; otherwise it falls back to a CSS background image.
The examples below demonstrate the Photo Video Block in two configurations: a video background example with an autoplay looping MP4 and a floating content card, and an image background example that uses a static image as a CSS background with a centered content overlay.
Usage Notes
- The Photo Video Block renders a full-viewport-height (
height:100vh) container with either a video or image background, plus a centered floating card overlay. - If the
Videofield has a value, the component renders a<video>element as the background (muted, autoplay, loop, playsinline) and shows a Play/Pause toggle button in the bottom-right corner. - If no video is present but the
Imagefield has a value, the component uses the image as a CSSbackground-imagewithcoversizing and centered position. - The floating content card renders the
Titlefield (viasc-texttag helper) and theCopyfield (rich text) inside a white semi-transparent Bootstrap card centered vertically and horizontally within the container. - The rendering does not define its own rendering parameters template. It inherits only the standard section parameters from the parent
bs-sectionwrapper. - The datasource template extends the Beryllium base (Title, Copy, Image, Link) and adds
Video(General Link to MP4),VideoTrack(File), andCssClasses(Single-Line Text) fields. - The component uses
overflow:hiddenon the container and absolutely positions the video element to achieve the background video effect.
Control Properties
Standard Values / Defaults
The Photo Video Block rendering does not define its own rendering parameters template. It relies solely on the standard parameters inherited from the parent bs-section wrapper.
| Parameter | Default Value |
|---|---|
| No component-specific rendering parameters. Only inherited section parameters apply. | |
Rendering Registration
| Property | Value |
|---|---|
| Rendering Path | /sitecore/layout/Renderings/Feature/MklComponents/Photo Video Block |
| Component Name | PhotoVideoBlock |
| Datasource Template | /sitecore/templates/Feature/MklComponents/Photo Video Block |
| Datasource Location | ./Page Components or query:./ancestor-or-self::*[@@templatename='Site']/Shared Content |
Template Properties
The Photo Video Block datasource uses the Photo Video Block template (Feature/MklComponents/Photo Video Block), which inherits from the Beryllium base template (Title, Copy, Image, Link).
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | Main heading rendered inside the floating card overlay. |
| Copy | Rich Text | Body text/HTML rendered below the title inside the card. |
| Image | Image | Background image displayed when no video is provided. Applied as a CSS background-image with cover sizing. |
| Link | General Link | Optional call-to-action link (inherited from Beryllium; not currently rendered in the view). |
| Video | General Link (external URL to MP4) | URL to the video file. When populated, the component renders a <video> element as the background instead of the image. |
| VideoTrack | File | Optional video track file (e.g., subtitles/captions). Not currently rendered in the default view. |
| CssClasses | Single-Line Text | Additional CSS classes appended to the outer container element. |
Behavior priority: If Video has a value, the video background is used and the Image field is ignored. If Video is empty and Image has a value, the image background is used. If both are empty, the container renders with no background.