{
"@import": "./element.php",
"name": "video",
"title": "Video",
"group": "basic",
"icon": "${url:images/icon.svg}",
"iconSmall": "${url:images/iconSmall.svg}",
"element": true,
"width": 500,
"defaults": {
"video_controls": true,
"margin": "default"
},
"placeholder": {
"props": {
"video": "${url:~yootheme/theme/assets/images/element-video-placeholder.mp4}"
}
},
"templates": {
"render": "./templates/template.php",
"content": "./templates/content.php"
},
"fields": {
"video": {
"label": "Video",
"description": "Select a video file or enter a link from YouTube or Vimeo.",
"type": "video",
"source": true
},
"video_width": {
"label": "Width"
},
"video_height": {
"label": "Height"
},
"video_controls": {
"label": "Options",
"type": "checkbox",
"text": "Show controls",
"enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')"
},
"video_loop": {
"type": "checkbox",
"text": "Loop video",
"enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')"
},
"video_muted": {
"type": "checkbox",
"text": "Mute video",
"enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')"
},
"video_playsinline": {
"type": "checkbox",
"text": "Play inline on mobile devices",
"enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')"
},
"video_lazyload": {
"type": "checkbox",
"text": "Lazy load video",
"enable": "video"
},
"video_autoplay": {
"label": "Autoplay",
"description": "Disable autoplay, start autoplay immediately or as soon as the video enters the viewport.",
"type": "select",
"options": {
"Off": "",
"On": true,
"On (If inview)": "inview"
},
"enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')"
},
"video_poster": {
"label": "Poster Frame",
"description": "Select an optional image which shows up until the video plays. If not selected, the first video frame is shown as the poster frame.",
"type": "image",
"source": true,
"enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')"
},
"video_box_shadow": {
"label": "Box Shadow",
"description": "Select the video box shadow size.",
"type": "select",
"options": {
"None": "",
"Small": "small",
"Medium": "medium",
"Large": "large",
"X-Large": "xlarge"
}
},
"video_box_decoration": {
"label": "Box Decoration",
"description": "Select the video box decoration style.",
"type": "select",
"options": {
"None": "",
"Default": "default",
"Primary": "primary",
"Secondary": "secondary",
"Floating Shadow": "shadow",
"Mask": "mask"
}
},
"video_box_decoration_inverse": {
"type": "checkbox",
"text": "Inverse style",
"enable": "$match(video_box_decoration, '^(default|primary|secondary)$')"
},
"video_poster_focal_point": {
"label": "Poster Frame Focal Point",
"description": "Set a focal point to adjust the image focus when cropping.",
"type": "select",
"options": {
"Top Left": "top-left",
"Top Center": "top-center",
"Top Right": "top-right",
"Center Left": "center-left",
"Center Center": "",
"Center Right": "center-right",
"Bottom Left": "bottom-left",
"Bottom Center": "bottom-center",
"Bottom Right": "bottom-right"
},
"source": true,
"enable": "video && !$match(video, '(youtube\\.com|youtube-nocookie\\.com|youtu\\.be|vimeo\\.com)', 'i')"
},
"position": "${builder.position}",
"position_left": "${builder.position_left}",
"position_right": "${builder.position_right}",
"position_top": "${builder.position_top}",
"position_bottom": "${builder.position_bottom}",
"position_z_index": "${builder.position_z_index}",
"margin": "${builder.margin}",
"margin_remove_top": "${builder.margin_remove_top}",
"margin_remove_bottom": "${builder.margin_remove_bottom}",
"maxwidth": "${builder.maxwidth}",
"maxwidth_breakpoint": "${builder.maxwidth_breakpoint}",
"block_align": "${builder.block_align}",
"block_align_breakpoint": "${builder.block_align_breakpoint}",
"block_align_fallback": "${builder.block_align_fallback}",
"text_align": "${builder.text_align}",
"text_align_breakpoint": "${builder.text_align_breakpoint}",
"text_align_fallback": "${builder.text_align_fallback}",
"animation": "${builder.animation}",
"_parallax_button": "${builder._parallax_button}",
"visibility": "${builder.visibility}",
"container_padding_remove": "${builder.container_padding_remove}",
"name": "${builder.name}",
"status": "${builder.status}",
"source": "${builder.source}",
"id": "${builder.id}",
"class": "${builder.cls}",
"attributes": "${builder.attrs}",
"css": {
"label": "CSS",
"description": "Enter your own custom CSS. The following selectors will be prefixed automatically for this element: .el-element",
"type": "editor",
"editor": "code",
"mode": "css",
"attrs": {
"debounce": 500,
"hints": [".el-element"]
}
},
"transform": "${builder.transform}"
},
"fieldset": {
"default": {
"type": "tabs",
"fields": [
{
"title": "Content",
"fields": [
"video",
{
"description": "Set the video dimensions.",
"name": "_video_dimension",
"type": "grid",
"width": "1-2",
"fields": ["video_width", "video_height"]
},
"video_controls",
"video_loop",
"video_muted",
"video_playsinline",
"video_lazyload",
"video_autoplay",
"video_poster"
]
},
{
"title": "Settings",
"fields": [
{
"label": "Video",
"type": "group",
"divider": true,
"fields": [
"video_box_shadow",
"video_box_decoration",
"video_box_decoration_inverse",
"video_poster_focal_point"
]
},
{
"label": "General",
"type": "group",
"fields": [
"position",
"position_left",
"position_right",
"position_top",
"position_bottom",
"position_z_index",
"margin",
"margin_remove_top",
"margin_remove_bottom",
"maxwidth",
"maxwidth_breakpoint",
"block_align",
"block_align_breakpoint",
"block_align_fallback",
"text_align",
"text_align_breakpoint",
"text_align_fallback",
"animation",
"_parallax_button",
"visibility",
"container_padding_remove"
]
}
]
},
"${builder.advanced}"
]
}
}
}