Styling subtitles with Transloadit: 3 creative ways

A distinctive subtitle style is just one of the many ways in which video streaming services can choose to define their brand. You can often tell in a single glance whether a video originates from Netflix or YouTube, simply based off the design of the subtitles. The aim of today's blog is to help you create a unique brand identity for your content, by uncovering the secrets of subtitle styling with the help of Transloadit.

Our base Template

Before we go through any styling options, let's look at the base Template that we are going to be using to control our file flow.

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "video_filtered": {
      "use": ":original",
      "robot": "/file/filter",
      "result": true,
      "accepts": [["${file.mime}", "regex", "video"]],
      "error_on_decline": false
    },
    "subtitle_filtered": {
      "use": ":original",
      "robot": "/file/filter",
      "result": true,
      "accepts": [["${file.mime}", "regex", "application/x-subrip"]],
      "error_on_decline": false
    }
  }
}

The two /file/filter Steps here will select our video and subtitle files from the array of files we upload to the Assembly, and allow us to directly access and pass them on to the subsequent /video/subtitle Steps.

Throughout the rest of the blog, each Step we look at will be added onto this basic Template.

With that out of the way, it's time to get creative! 🎨

1. Netflix subtitles

First up are the Netflix subtitles, with their characteristic back-to-basics style. The Step shown below will:

• Set the border_style to shadow
• Make the primary text color white
• Make the shadow color black, and slightly transparent
• Set the font to Consolas

  "netflix": {
    "robot": "/video/subtitle",
    "use": {
      "steps": [
        {
          "name": "video_filtered",
          "as": "video"
        },
        {
          "name": "subtitle_filtered",
          "as": "subtitles"
        }
      ]
    },
    "preset": "empty",
    "ffmpeg_stack": "v5.0.0",
    "subtitles_type": "burned",
    "font": "Consolas",
    "border_color": "80000000",
    "font_color": "FFFFFF",
    "border_style": "shadow"
  }

Looks pretty sleek, doesn't it?

2. YouTube subtitles

Now onto Youtube's blocky subtitle style. To achieve this effect, we need to:

• Set the font to Roboto
• Set the border_style to box
• Make the font color white
• Make the box color black, and slightly transparent

  "youtube": {
    "robot": "/video/subtitle",
    "use": {
      "steps": [
        {
          "name": "video_filtered",
          "as": "video"
        },
        {
          "name": "subtitle_filtered",
          "as": "subtitles"
        }
      ]
    },
    "preset": "empty",
    "ffmpeg_stack": "v5.0.0",
    "subtitles_type": "burned",
    "font": "Roboto",
    "border_color": "40000000",
    "font_color": "FFFFFF",
    "border_style": "box"
  }

This should look quite familiar!

3. Vintage subtitles

Our final style is a veritable blast from the past: some vintage, VHS-inspired subtitles. We need to set our parameters as follows:

• Set the font to Arial
• Set the border_style to outline
• Set the outline color to black
• Set the text color to that distinctive shade of yellow

  "vintage": {
    "robot": "/video/subtitle",
    "use": {
      "steps": [
        {
          "name": "video_filtered",
          "as": "video"
        },
        {
          "name": "subtitle_filtered",
          "as": "subtitles"
        }
      ]
    },
    "preset": "empty",
    "ffmpeg_stack": "v5.0.0",
    "subtitles_type": "burned",
    "font": "Arial",
    "border_color": "00000000",
    "font_color": "03fcff",
    "border_style": "outline"
  }

Now take a moment to admire our retro-style subtitles in all their glory.

Wrapping up

That's all for our brief look at subtitle styling using Transloadit. Of course, feel free to play around with the parameters yourself to see what suits you and your content best. For even more customization and fine-grain control, take a look at SSA Subtitles, which Transloadit also supports.

Until next time! And in the meantime, why not take a look at one of our demos?