Component elements

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.

Check available components

Anatomy of a component element

Component elements have this blueprint:

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

• component-id: The component property of the element defines what component to use in the format of pack/number. Example basic/001.
• settings: The settings object of the element defines your customizations to the component, and can have multiple item objects as properties. Each item represents a visual element in the component, like the headline, an image or a card.
• item properties: With the item properties you can change the look and behaviour of the item and they are basically CSS properties plus a few propietary properties.

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:

• background
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• border
• border-bottom
• border-bottom-left-radius
• border-bottom-right-radius
• border-collapse
• border-color
• border-left
• border-radius
• border-right
• border-spacing
• border-style
• border-top
• border-top-left-radius
• border-top-right-radius
• border-width
• box-shadow
• color
• dir
• display
• drop-shadow
• font-family
• font-size
• font-weight
• height
• letter-spacing
• line-height
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• opacity
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• text-align
• text-shadow
• text-stroke
• transform
• transform-origin
• width

Propietary properties in components

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

This propietary properties are:

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.