Expanding lower third template example questions

Shotstack API
1

From this example: Expanding lower third video template — Shotstack

  1. It states “The container table expands as the text increases/wraps.” But that doesn’t seem to be the case? It seems like the height and width are defined at fixed.

  2. Also, as my html/css skills are weak, is it possible to add a semi-transparent background so that the text is legible on a variety of images / videos?

  3. Lastly, is the first track in the json array rendered ‘on top’ of the others?

thanks!

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