VideoPopup/V1

A clickable thumbnail image that opens a video modal when clicked. Supports YouTube and other video platforms.

Basic Structure

JSON

{
  "type": "VideoPopup/V1",
  "id": "6Z-VidPp-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "alt": "Video thumbnail description"
  },
  "params": {
    "imageUrl": [
      { "type": "text", "innerText": "https://example.com/thumbnail.png" }
    ],
    "default-aspect-ratio": "16 / 9"
  }
}

Complete Example

VideoPopup with YouTube video and styling:

JSON

{
  "type": "VideoPopup/V1",
  "attrs": {
    "alt": "Watch our product demo"
  },
  "params": {
    "imageUrl": [
      { "type": "text", "innerText": "https://example.com/thumbnail.png" }
    ],
    "default-aspect-ratio": "756 / 822"
  },
  "selectors": {
    ".elImage": {
      "attrs": {
        "style": { "width": 67, "border-radius": 12 },
        "data-skip-corners-settings": "false",
        "data-skip-shadow-settings": "false"
      },
      "params": {
        "width--unit": "%",
        "border-radius--unit": "px"
      }
    },
    ".elImageWrapper": {
      "attrs": { "style": { "text-align": "center" } }
    },
    ".elVideoWrapper": {
      "params": {
        "video_url": "https://www.youtube.com/watch?v=W9dfVFwS_Ro"
      },
      "attrs": {
        "data-video-type": "youtube",
        "data-video-title": "Product Demo Video"
      }
    },
    ".elVideoWrapper .elVideoplaceholder_inner": {
      "params": {
        "--style-background-image-url": "https://img.youtube.com/vi/W9dfVFwS_Ro/maxresdefault.jpg"
      },
      "attrs": { "className": "bgCoverCenter" }
    },
    ".elModal": {
      "params": {
        "--style-background-color": "rgba(0, 0, 0, 0.8)"
      }
    }
  }
}

Available Selectors

Selector	Purpose
`.elImage`	Thumbnail image styling (width, corners, shadow)
`.elImageWrapper`	Container for alignment (text-align)
`.elVideoWrapper`	Video configuration (video_url, data-video-type)
`.elVideoWrapper .elVideoplaceholder_inner`	Video placeholder background image
`.elModal`	Modal overlay background color

Video Types

Set the video type in the .elVideoWrapper attrs:

Type	Value
YouTube	`data-video-type: "youtube"`
Vimeo	`data-video-type: "vimeo"`

Thumbnail Styling

Add border and shadow to the thumbnail:

JSON

{
  "selectors": {
    ".elImage": {
      "attrs": {
        "style": { "width": 80, "border-radius": 16 },
        "data-skip-corners-settings": "false",
        "data-skip-shadow-settings": "false"
      },
      "params": {
        "width--unit": "%",
        "border-radius--unit": "px",
        "--style-border-style": "solid",
        "--style-border-width": 4,
        "--style-border-color": "#ffffff",
        "--style-border-width--unit": "px",
        "--style-box-shadow-distance-x": 0,
        "--style-box-shadow-distance-y": 8,
        "--style-box-shadow-blur": 24,
        "--style-box-shadow-spread": 0,
        "--style-box-shadow-color": "rgba(0, 0, 0, 0.2)"
      }
    }
  }
}

Supported Features

Feature	Supported
Background	No
Border	Yes
Shadow	Yes
Corners	Yes