Expanding lower third template example questions

Shotstack API
2

You are right that the HTML asset has a fixed width and height container (like a div). The table inside the container will however expand in height. The width is also fixed in this template.

To allow the height to expand higher than 200px, just change the asset height to 700 (hd video height is 720). Then the table can expand the full height of the video.

For the transparency you can adjust the table css background-color: #77000000; property. 77 is the opacity level and 000000 is the colour (black). It works the same as regular CSS except opacity goes first.

Finally, yes, the order of the tracks dictates which layer is on top, so the first track sits on top of the second track and so on…

Here is an updates JSON template with the container height set to 700 and opacity increased to 33 so it is more transparent:

{
    "timeline": {
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/berlin.mp3"
        },
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Bold.ttf"
            }
        ],
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<table border='0' width='1000'><tr><td bgcolor='#FF0000' width='10'>&nbsp;</td><td width='990'><p>This is a lower third example that will expand as the amount of text increases. This is a lower third example that will expand as the amount of text increases.This is a lower third example that will expand as the amount of text increases.This is a lower third example that will expand as the amount of text increases.</p></td></tr></table>",
                            "css": "table { background-color: #33000000; } td { padding-top: 16px; padding-bottom: 16px; } p { color: #FFFFFF; font-size: 34px; font-family: 'Open Sans'; font-weight: bold; margin: 20px; }",
                            "height": 700,
                            "width": 1000,
                            "position": "bottom"
                        },
                        "start": 0,
                        "length": 8,
                        "position": "bottom",
                        "offset": {
                            "y": 0.05
                        },
                        "transition": {
                            "in": "slideUp",
                            "out": "slideDown"
                        }
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/wave-barrel.jpg"
                        },
                        "start": 0,
                        "length": 8,
                        "effect": "zoomIn"
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

And the output:

1 Like