You don't need to start your video from scratch. Even if you are not a graphical designer, you can use the Component elements to quickly create good-looking videos with no effort.

The component element is a very powerful tool to supercharge your videos with ready to use predefined features and designs. But these predefined designs are highly customizable using CSS and propietary properties.

Component elements were formerly called "Template" elements.

Anatomy of a component element

Component elements have this blueprint:

{
    "type": "component",
    "component": "[[component-id]]",
    "settings": {
        "[[item]]": {
            "[[item-property]]": "[[item-value]]"
        }
    }
}

This is a full example of a component element:

{
    "type": "component",
    "component": "basic/001",
    "settings": {
        "card": {
            "background": "white",
            "border-radius": "10px",
            "padding": "1vw"
        },
        "headline": {
            "color": "red",
            "font-size": "5vw",
            "font-family": "Inter"
        }
    }
}

Supported CSS properties in components

In the contrary of the HTML elements that support any HTML5 tag and any CSS3 declaration, Component elements support a limited sort of CSS3 properties.

The list of supported CSS properties are:

Propietary properties in components

JSON2Video uses a few propietary properties to simplify the customization of the components.

This propietary properties are:

Property
Description
horizontal-align
Defines how an item aligns horizontally. Possible values: left | center | right
src
Defines the source URL of an item, usually an image. Example: https://example.com/image.jpg
vertical-align
Defines how an item aligns vertically. Possible values: top | center | bottom

Component examples

Lower-third example

In the television industry, a lower third is a graphic overlay placed in the lower area of the screen, though not necessarily the entire lower third of it, as the name suggests.

JSON2Video library has a few lower-third components you can use out-of-the-box in your projects. The following example shows how to add a lower-third to a video.

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/new-york-01.mp4"
                },
                {
                    "type": "component",
                    "component": "basic/050",
                    "settings": {
                        "card": {
                            "vertical-align": "bottom"
                        },
                        "headline": {
                            "text": "Broadway will allow theatergoers to go mask optional in July",
                            "font-size": "auto"
                        },
                        "lead": {
                            "text": "Proof of vaccination is no longer required for patrons of the city's indoor dining, fitness and entertainment venues.",
                            "font-size": "auto"
                        }
                    },
                    "start": 3
                }
            ]
        }
    ]
}

The basic/050 component is inpired on the lower thirds used by CNN.

You can get all details of basic/050 here.

Button example

This example showcases how to create a visual button you can add to your video as a call-to-action.

{
    "width": 640,
    "height": 320,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#FAF3DD",
            "elements": [
                {
                    "type": "component",
                    "component": "advanced/050",
                    "settings": {
                        "button": {
                            "background": "#E3170A",
                            "border": "0.2vw solid rgba(0,0,0,20%)",
                            "border-radius": "3vw",
                            "padding": "0 15vw",
                            "box-shadow": "inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
                            "text": "Subscribe!",
                            "text-shadow": ".3vw .3vw rgba(0,0,0,0.4)",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}

Other examples

Check other component examples in the Resources section.