{"id":37718,"date":"2025-06-02T07:00:00","date_gmt":"2025-06-02T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=37718"},"modified":"2025-07-21T17:56:59","modified_gmt":"2025-07-22T00:56:59","slug":"customizing-subtitles-captions-marketing-videos","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/customizing-subtitles-captions-marketing-videos","title":{"rendered":"Customizing Subtitles and Captions in Marketing Videos"},"content":{"rendered":"\n

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\u2019t make out what they\u2019re saying or if they have incomprehensible, inaccurate captions.<\/p>\n\n\n\n

There\u2019s a reason why so many influencers and brands add captions and subtitles to their marketing videos. Captions increase video views by up to 80%<\/a> and enhance<\/a> <\/a>s<\/a>earch <\/a>e<\/a>ngine <\/a>o<\/a>ptimization<\/a> <\/a>(SEO)<\/a>, making the video more discoverable. Automating captioning with platforms like Cloudinary Video streamlines this process.<\/p>\n\n\n\n

In this post, we\u2019ll go over how you can experiment with different caption styles using Cloudinary Video and gauge user response with Cloudinary\u2019s AI Vision<\/a>.<\/p>\n\n\n\n

How to Customize Subtitles in Cloudinary Studio<\/h2>\n\n\n\n

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

If you\u2019re 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<\/a>. You can also automatically generate transcripts and set them as subtitles using the Video Studio, which will be covered below.<\/p>\n\n\n\n

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

\"Cloudinary
The Cloudinary Media Library<\/figcaption><\/figure>\n\n\n\n

Cloudinary\u2019s Video Studio enables you to interact with videos, trim them (which can help you create video previews<\/a>), set titles and thumbnails, add chapters, and more.<\/p>\n\n\n\n

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<\/strong>. This will move you to a new menu where you can select the option to generate a transcript:<\/p>\n\n\n\n

\"Cloudinary
The Cloudinary Video Studio includes a transcript generator and editor tool<\/figcaption><\/figure>\n\n\n
Note:<\/strong>

If you want to know more about how the Cloudinary Video Studio works, check out the Video Player documentation<\/a>.<\/p>\n<\/div>\n\n\n

Now click Auto-generate Transcript.<\/strong> Cloudinary will analyze the video and generate a synced transcript:<\/p>\n\n\n\n

\"In
Cloudinary can automatically generate video transcripts for you<\/figcaption><\/figure>\n\n\n\n

The process can take a while, depending on the length of the video and the transcription. When it\u2019s done, a full transcript will appear in the Transcript Editor<\/strong>tab. Toggle the option that says Set as subtitles<\/strong>to set the transcript as the video\u2019s subtitles or captions.<\/p>\n\n\n\n

Here\u2019s a quick view of the video, before and after adding the automatically generated subtitles:<\/p>\n\n\n\n <\/video>\n <\/cld-video-player>\n\n\n

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

\"In
You can set default subtitles for videos in the Cloudinary Video Studio<\/figcaption><\/figure>\n\n\n\n

Now, here\u2019s how subtitles look by default when you add them using the Cloudinary Video Studio:<\/p>\n\n\n\n

\"Cloudinary
The Cloudinary Video Player supports custom captions and subtitles<\/figcaption><\/figure>\n\n\n\n

The Video Studio lets you experiment with different subtitle styles and variations. For this guide, let\u2019s go over how to change the text style and placement.<\/p>\n\n\n\n

To start, navigate to the Player Appearance<\/strong>tab inside the studio. Look for the Player theme<\/strong> 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:<\/p>\n\n\n\n

\"In
You can change the style of the Cloudinary Video Player<\/figcaption><\/figure>\n\n\n\n

For the previous screenshot, I changed the player\u2019s 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\u2019ll need to work with JavaScript to make more complex transformations.<\/p>\n\n\n\n

If you look under the player in the Video Studio, you\u2019ll see multiple tabs, including options for embedding the video you\u2019re working on. You can use JavaScript code, a link, or an iFrame<\/strong> for embedding the video:<\/p>\n\n\n\n

\"In<\/figure>\n\n\n\n

You can make further changes to the caption\u2019s style through the JavaScript code displayed. Here\u2019s a quick example where I increased the font size and moved the subtitles to the top of the video:<\/p>\n\n\n

const<\/span> player = cloudinary.player('player'<\/span>, {\n\n\u00a0 cloudName: 'djte4pdpm'<\/span>,\n\n\u00a0 fontFace: 'Handlee'<\/span>,\n\n\u00a0 publicId: 'Cloudinary_Video_API_High-performing_video_at_scale-_1080p30_3_yfglql'<\/span>,\n\n\u00a0 textTracks: {\n\n\u00a0 \u00a0 captions: {\n\n\u00a0 \u00a0 \u00a0 label: 'English'<\/span>,\n\n\u00a0 \u00a0 \u00a0 language: 'en'<\/span>,\n\n\u00a0 \u00a0 \u00a0 url: 'https:\/\/res.cloudinary.com\/djte4pdpm\/raw\/upload\/v1739555695\/English_Cloudinary_Video_API__High-performing_video_at_scale_DownSub.com_joyifw.srt'<\/span>,\n\n\u00a0 \u00a0 \u00a0 default<\/span>: true<\/span>,\n\n\u00a0 \u00a0 \u00a0 style: {\n\n\u00a0 \u00a0 \u00a0 \u00a0 fontSize: '24px'<\/span>, \/\/ Makes the captions larger<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 color: '#FFFFFF'<\/span>, \/\/ White text for good contrast<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 bottom: 'auto'<\/span>, \u00a0 \/\/ Override the default bottom positioning<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 top: '10px'<\/span>, \u00a0 \u00a0 \u00a0\/\/ Moves captions to the top (adjust as needed) \u00a0 \u00a0 \u00a0 \u00a0<\/span>\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 }\n\n\u00a0 }\n\n});<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n
Note:<\/strong> 
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.<\/p>\n<\/div>\n\n\n
Take some time to experiment with different combinations of fonts, font sizes, colors, and alignment. Since most videos need different caption settings, you\u2019ll want to get comfortable customizing the embed code.<\/p>\n\n\n\n
AI Vision for Sentiment and Engagement Analysis<\/h2>\n\n\n\n
A useful way to gauge if your caption styles work is to use Cloudinary\u2019s AI Vision<\/a> tool. You can interact with AI Vision through the Cloudinary API and ask it questions about specific images, like:<\/p>\n\n\n\n