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.

Check available templates

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:

• 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 templates

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

This propietary properties are:

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.

{
    "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.

{
    "width": 1920,
    "height": 1080,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#4392F1",
            "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,
                    "width": -1,
                    "height": -1,
                    "start": 0,
                    "extra-time": 0,
                    "z-index": 0,
                    "cache": true,
                    "position": "custom",
                    "x": 0,
                    "y": 0
                }
            ],
            "duration": -1
        }
    ],
    "resolution": "full-hd"
}

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->width = 1920;
$movie->height = 1080;
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background_color = '#4392F1';
$scene1->addElement([
'component',
'advanced/050',
	[
		[
'#E3170A',
'0.2vw solid rgba(0,0,0,20%)',
'3vw',
'0 15vw',
'inset -1vw -1vw 1vw rgba(0,0,0,0.2)',
'Subscribe!',
'.3vw .3vw rgba(0,0,0,0.4)',
'10vw',
'Anton'
		]
	],
10,
-1,
-1,
0,
0,
0,
true,
'custom',
0,
0
]);
$scene1->duration = -1;
$movie->addScene($scene1);
$movie->resolution = 'full-hd';

// 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("width", 1920);
movie.set("height", 1080);
movie.set("quality", "high");
movie.set("draft", true);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#4392F1");
scene1.addElement([
"component",
"advanced/050",
	[
		[
"#E3170A",
"0.2vw solid rgba(0,0,0,20%)",
"3vw",
"0 15vw",
"inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
"Subscribe!",
".3vw .3vw rgba(0,0,0,0.4)",
"10vw",
"Anton"
		]
	],
10,
-1,
-1,
0,
0,
0,
true,
"custom",
0,
0
]);
scene1.set("duration", -1);
movie.addScene(scene1);
movie.set("resolution", "full-hd");

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

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

Other examples

Check other template examples in the Templates section.