The HTML Asset Rendering is not the same like Web HTML

Shotstack API
1

Shotstack Rendering

Input Dtata:

{
  "timeline": {
    "background": "#ffffff",
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "html",
              "html": "<div>Welcmne to your Manual Handling Course</div>",
              "css": "div { background: red; font-size: 87px;color: #000000;font-weight: bold;font-style: normal;text-decoration: none;text-align: center;width: 720px;height: 371.39333333333326px;line-height: 104.39999999999999px;}",
              "width": 720.0,
              "height": 450
            },
            "start": 0.0,
            "length": 8.760000000000002,
            "scale": 1.0,
            "position": "center",
            "offset": {
              "x": 0.0003,
              "y": -0.0182
            },
            "transform": {
              "rotate": {
                "angle": 0.0
              }
            }
          }
        ]
      }
    ],
    "fonts": [
      {
        "src": "https://cdn.jsdelivr.net/npm/@expo-google-fonts/noto-sans-sc@0.2.2/NotoSansSC_400Regular.ttf"
      }
    ],
    "cache": false
  },
  "output": {
    "format": "mp4",
    "size": {
      "width": 1920,
      "height": 1080
    },
    "aspectRatio": "16:9",
    "thumbnail": {
      "capture": 1,
      "scale": 0.5
    }
  }
}

Result

image
image1584×1188 92.7 KB

HTML Rendering

Pure HTML


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: "NotoSansSC";
      src: url(https://cdn.jsdelivr.net/npm/@expo-google-fonts/noto-sans-sc@0.2.2/NotoSansSC_400Regular.ttf) format("truetype");
    }
    div { background: red; font-size: 87px;color: #000000;font-weight: bold;font-style: normal;text-decoration: none;text-align: center;width: 720px;height: 371.39333333333326px;line-height: 104.39999999999999px;}
  </style>
</head>
<body>
  <div>Welcmne to your Manual Handling Course</div>
</body>
</html>
2

HTML Result

image
image1488×1412 179 KB

3

@dazzatron Could you help with this? We got the same issue. :pray:

4

There are a few things to consider here. First of all we only support a full subset of HTML (see here: HTML Support | Shotstack Documentation).

You also can’t use a div and give it a width and height. But what you can do is give the bounding box a background color.

So instead you can do this for the asset:

"asset": {
  "type": "html",
  "html": "<p>Welcome to your Manual Handling Course</p>",
  "css": "p { font-family: 'Noto Sans SC'; font-size: 87px; color: #000000; font-weight: bold; line-height: 104.39999999999999; }",
  "width": 720,
  "height": 370,
  "background": "#FF0000",
  "position": "top"
}

That should get you pretty close to what you are trying to achieve and give you the red box you want.

2 Likes