Html asset over image asset does not persist

Hi @dazzatron, @lucas.spielberg,
I am in need of some urgent help.
I am trying to add a title over each slide of the video by using the HTML asset and use of tracks. However the text does not stay on as expected, instead it vanishes and emerges with the the slide.
as shown below



generated video url:
https://shotstack-api-stage-output.s3-ap-southeast-2.amazonaws.com/s7rhxcmtua/c8f1e99f-a7fb-4b79-8e09-84c71a3cdb1f.mp4

and I am using the following json

{
   "timeline": {
      "background": "#FFFFFF",
      "fonts": [
         {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
         }
      ],
      "tracks": [
         {
            "clips": [
               {
                  "asset": {
                     "type": "image",
                     "src": "http://3.12.92.138/api/tour/branding/16345549012054.jpeg/branding-image"
                  },
                  "start": 0,
                  "length": 5,
                  "transition": {
                     "in": "fade",
                     "out": "fade"
                  }
               },
               {
                  "asset": {
                     "type": "image",
                     "src": "http://3.12.92.138/api/tour/media/bcb76dc5-25ae-4099-84b5-ad9a58bfe28e/16341903067732-converted-png.png/product-image?t=1635147429"
                  },
                  "start": 5,
                  "length": 5,
                  "transition": {
                     "in": "fade",
                     "out": "fade"
                  }
               },           
               {
                  "asset": {
                     "type": "image",
                     "src": "http://3.12.92.138/api/tour/branding/16345549012054.jpeg/branding-image"
                  },
                  "start": 10,
                  "length": 5,
                  "transition": {
                     "in": "fade",
                     "out": "fade"
                  }
               }
            ]
         },
         {
            "clips": [
               {
                  "asset": {
                     "type": "html",
                     "html": "<p>Title goes here</p>",
                     "css": "p { font-family: 'Open Sans'; color: #cccccc; font-size: 20px; text-align: left; } b { color: #000000; font-weight: normal; } u { color: #e784ff; text-decoration: none; }",
                     "width": 800,
                     "height": 70,
                     "background": "#000000",
                     "position": "topLeft"
                  },
                  "start": 5,
                  "length": 5,
                  "offset": {
                     "y": 0.4
                  }
               }
            ]
         }
      ]
   },
   "output": {
      "format": "mp4",
      "resolution": "hd"
   },
   "callback": "http://api-bcfloor.local/api/tour/project/bcb76dc5-25ae-4099-84b5-ad9a58bfe28e/call-back-from-shotstack"
}

any help to resolve this is much appreciated

thank you

It looks like your tracks are in the wrong order. They appear in the video one over another in the same order that they are ordered in the JSON. So with your current edit the images are in a track above the text. Swap the order around so that the HTML comes first and then your title will display above the images.

1 Like