Skip to content

RESOURCES / BLOG

Customizing Subtitles and Captions in Marketing Videos

Why It Matters

  • Automatically generate transcripts and set them as subtitles directly within Cloudinary’s Video Studio using the Transcript Editor.
  • The Cloudinary Video Studio offers UI options to change elements like font and color, and Javascript code can be embedded for more advanced customizations.
  • Combine AI Vision with analytics data to experiment with caption styles for maximum viewer engagement.

People want more video, and that means you might spend more time than you want setting up captions to make your content more accessible. After all, marketing videos can flop if the audience can’t make out what they’re saying or if they have incomprehensible, inaccurate captions.

There’s a reason why so many influencers and brands add captions and subtitles to their marketing videos. Captions increase video views by up to 80% and enhance search engine optimization (SEO), making the video more discoverable. Automating captioning with platforms like Cloudinary Video streamlines this process.

In this post, we’ll go over how you can experiment with different caption styles using Cloudinary Video and gauge user response with Cloudinary’s AI Vision.

To follow this tutorial, you’ll need a Cloudinary account (register for free here) and access to Cloudinary Assets. You’ll also need a video file and a corresponding subtitle or caption file, which usually come in SubRip Subtitle (SRT) format.

If you’re not sure how to generate subtitles or captions for your videos, there are a lot of automatic solutions that can help you. With access to the Cloudinary API, you can leverage the Google AI video transcription add-on to automatically generate subtitle files for your videos. You can also automatically generate transcripts and set them as subtitles using the Video Studio, which will be covered below.

To start, access your Cloudinary dashboard and navigate to the Assets > Media Library tab. Look for the video you want to customize the subtitles for, right-click it, and select the Video Player Studio option:

Cloudinary Media Library with the Media Library tab highlighted on the left-hand panel
The Cloudinary Media Library

Cloudinary’s Video Studio enables you to interact with videos, trim them (which can help you create video previews), set titles and thumbnails, add chapters, and more.

The next step depends on whether you have a subtitle or caption file ready or if you need to generate one. If you need to generate subtitles for the video, click Transcript Editor. This will move you to a new menu where you can select the option to generate a transcript:

Cloudinary Video Studio with the Transcript Editor highlighted on the left-hand panel
The Cloudinary Video Studio includes a transcript generator and editor tool

Now click Auto-generate Transcript. Cloudinary will analyze the video and generate a synced transcript:

In Transcript Editor, the Auto-generate Transcript button is highlighted on the left-hand panel
Cloudinary can automatically generate video transcripts for you

The process can take a while, depending on the length of the video and the transcription. When it’s done, a full transcript will appear in the Transcript Editortab. Toggle the option that says Set as subtitlesto set the transcript as the video’s subtitles or captions.

Here’s a quick view of the video, before and after adding the automatically generated subtitles:https://www.loom.com/share/d2f2e6a54ce144b5ba1bb71ba3ba909d?sid=6a8c141d-540e-429e-bc1a-28f998e773bb

If you already have a captions file you want to use with the video, go to Captions & Subtitles instead. Select the language for the file you want to add and copy its URL. Then click Apply:

In Captions & Subtitles tab, the Captions option is highlighted with English language selected. The image URL is filled in the box next to it.
You can set default subtitles for videos in the Cloudinary Video Studio

Now, here’s how subtitles look by default when you add them using the Cloudinary Video Studio:

Cloudinary Video Player with an example still image and default captions, which are white and have a slight dropshadow.
The Cloudinary Video Player supports custom captions and subtitles

The Video Studio lets you experiment with different subtitle styles and variations. For this guide, let’s go over how to change the text style and placement.

To start, navigate to the Player Appearancetab inside the studio. Look for the Player theme options and change the font and color the player uses by default. You can also update the colors the player uses for other text (like timestamps) and accent tones:

In Video player profile, the Player theme section is highlighted. You can change Font, Base color, Icon / text color, and Accent color.
You can change the style of the Cloudinary Video Player

For the previous screenshot, I changed the player’s colors and the font the subtitles use. While the Cloudinary Video Player lets you make some changes to subtitle styles through the user interface (UI), you’ll need to work with JavaScript to make more complex transformations.

If you look under the player in the Video Studio, you’ll see multiple tabs, including options for embedding the video you’re working on. You can use JavaScript code, a link, or an iFrame for embedding the video:

In Video player profile, there are many options for embedding the video: Jacascript code, link, iFrame, etc.

You can make further changes to the caption’s style through the JavaScript code displayed. Here’s a quick example where I increased the font size and moved the subtitles to the top of the video:

const player = cloudinary.player('player', {

  cloudName: 'djte4pdpm',

  fontFace: 'Handlee',

  publicId: 'Cloudinary_Video_API_High-performing_video_at_scale-_1080p30_3_yfglql',

  textTracks: {

    captions: {

      label: 'English',

      language: 'en',

      url: 'https://res.cloudinary.com/djte4pdpm/raw/upload/v1739555695/English_Cloudinary_Video_API__High-performing_video_at_scale_DownSub.com_joyifw.srt',

      default: true,

      style: {

        fontSize: '24px', // Makes the captions larger

        color: '#FFFFFF', // White text for good contrast

        bottom: 'auto',   // Override the default bottom positioning

        top: '10px',      // Moves captions to the top (adjust as needed)        

      }

    }

  }

});Code language: PHP (php)
Note:

Subtitles at the bottom of the screen might not be the best option for social media marketing videos, since they can be blocked by UI elements. Test videos on multiple platforms to learn what style and placement adjustments you need to make for each.

Take some time to experiment with different combinations of fonts, font sizes, colors, and alignment. Since most videos need different caption settings, you’ll want to get comfortable customizing the embed code.

A useful way to gauge if your caption styles work is to use Cloudinary’s AI Vision tool. You can interact with AI Vision through the Cloudinary API and ask it questions about specific images, like:

  • Is this style of caption effective for this video?
  • How does the X demographic respond to this style of captioning?
  • Is this the optimal place for the captions for this video?

AI Vision offers multiple work modes. For analyzing video stills, consider using the General mode, which is designed to ask questions about images.

This is an example of what an AI Vision request looks like:

curl 'https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v2/analysis/<CLOUD_NAME>/analyze/ai_vision_general' -d '{

  "source":

  {

    "uri": "https://res.cloudinary.com/demo/image/upload/leather_bag_gray"

  },

  "prompts": [

    "Is this style of caption effective for this video?”

    “How does X demographic respond to this style of captions?”

    “Is this the optimal place for the captions for this video?”

  ]

}'Code language: HTML, XML (xml)

Use the public address of an image still from your videos that shows captions clearly. In the prompts section, add one question per line.

Now, here’s what a response from AI Vision looks like:

{

  "limits": {

    "addons_quota": [

      {

        "type": "ai_vision",

        "used_by_request": 2276,

        "remaining": 96798,

        "limit": 100000,

        "reset_time": "2025-03-03T00:00:00Z"

      }

    ]

  },

  "request_id": "1c1a141f712448c7e549f5e4da59cc11",

  "data": {

    "entity": "https://res.cloudinary.com/demo/image/upload/leather_bag_gray",

    "analysis": {

      "responses": [

        {

          "value": "Feedback from the X demographic has been positive; users report that the bold and legible text enhances accessibility and comprehension, particularly in low-audio environments, making the viewing experience more inclusive and enjoyable."

        },

        {

          "value": "There is only one bag shown in the image. It's a single leather bag with a distinctive design, featuring a combination of tan leather and a green suede-like flap, photographed against a gray background."

        }

        {

          "value": "Initial analytics suggest that positioning the captions at the top minimizes overlap with key visuals and improves comprehension. However, further A/B testing across different devices is recommended to confirm this placement as optimal."

        }

      ],

      "model_version": 1

    }

  }

}Code language: JSON / JSON with Comments (json)

AI Vision is a powerful tool for automating image analysis. This can come in handy well beyond testing captions. You can use AI Vision for image moderation (e.g., Does this image meet the following guidelines?), tagging images, and more.

Automatically generate captions for your videos or upload existing subtitles with Cloudinary. The Cloudinary Video Player also supports customizations to how the captions will look, like such as their placement, size, and alignment.

If you want to take things further, you can use Cloudinary’s AI Vision to analyze which caption styles work and which ones don’t. AI Vision can give you great insight into how to use captions effectively, but you’ll also want to keep an eye on analytics to see what types of captions users favor.

Sign up for Cloudinary to optimize video captions for viewer engagement today!

Start Using Cloudinary

Sign up for our free plan and start creating stunning visual experiences in minutes.

Sign Up for Free