Template elements

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

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

Anatomy of a template element

Template elements have this blueprint:

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

template-id: The template property of the element defines what template to use in the format of library/number. Example basic/001.
settings: The settings object of the element defines your customizations to the template, and can have multiple item objects as properties. Each item represents a visual element in the template, 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 template element:

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

Supported CSS properties in templates

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

The list of supported CSS properties are:

Propietary properties in templates

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

This propietary properties are:

Property

Description

Types of templates

Template elements provide ready-to-use templates in multiple forms:

Text animations: elements that create text animations
Cards: elements that can show text and images with a pre-defined layout
Components: elements that provide a feature in the scene, like a lower-third, a watermark animation, an animated button, etc.
Scene templates: elements that cover the whole scene, like a slide or screen in a presentation deck

Technically, all templates work exactly the same - there is no difference.

Template 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 templates you can use out-of-the-box in your projects. The following example shows how to add a lower-third to a video.

JSON
PHP
NodeJS

Warning: substr() expects parameter 1 to be string, array given in /var/www/json2video.com/html/tpl/common.php on line 1096

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 5,
            "elements": [
                {
                    "type": "component",
                    "component": "basic/050",
                    "settings": {
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet"
                        }
                    }
                }
            ],
            "background-color": "#4392F1",
            "cache": true
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->duration = 5;
$scene1->addElement([
'component',
'basic/050',
	[
		[
'Lorem ipsum dolor sit amet'
		]
	]
]);
$scene1->background_color = '#4392F1';
$scene1->cache = 1;
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("duration", 5);
scene1.addElement([
"component",
"basic/050",
	[
		[
"Lorem ipsum dolor sit amet"
		]
	]
]);
scene1.set("background-color", "#4392F1");
scene1.set("cache", 1);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The basic/050 template 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.

JSON
PHP
NodeJS