> ## Documentation Index
> Fetch the complete documentation index at: https://docs.demokraft.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Generating and Customizing Video Captions

> Learn how to use AI Studio to integrate, style, color, and optimize captions for better accessibility and user engagement.

<iframe className="w-full aspect-video rounded-lg" src="https://www.youtube.com/embed/RU8g89Yiiq0" title="Introduction to Captions Feature" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Introduction to Captions Feature

This section introduces the capability to add captions to your projects, enhancing accessibility and user engagement.

## Integrating Captions Using AI Studio

AI Studio provides seamless integration of captions into your projects, enabling clear communication of spoken content.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_0.jpg" alt="AI Studio Caption Integration" />
</Frame>

## Accessing Captions Settings

Open your project in Studio mode. Locate the **Captions** option on the left-hand side panel to begin configuring captions for your project.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_1.jpg" alt="Captions Sidebar Menu" />
</Frame>

## Activating and Selecting Caption Styles

Activate the captions feature by toggling the switch. Browse the available caption styles and select the desired style to apply to your project; for example, selecting the last option available.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_3.jpg" alt="Sizing and Layout Properties" />
</Frame>

## Adjusting Caption Appearance Settings

Modify the caption size and visual effect offset to align captions with your project's design needs, ensuring optimal placement and visibility.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_3.jpg" alt="Sizing and Layout Properties" />
</Frame>

## Customizing Font Size and Colors

Adjust the font size and select color schemes to match your brand identity. This customization ensures consistency and enhances the professional appearance of captions.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_4.jpg" alt="Typography Color Customization" />
</Frame>

## Enhancing Readability with Text Colors

Set active text color to white and inactive text color to gray to improve caption clarity and readability without compromising visual appeal. Overall text color adjustments are also available as needed.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_5.jpg" alt="Active and Inactive Colors Configuration" />
</Frame>

## Advanced Text Color Customization

Choose additional text colors such as green or grayish tones to better reflect your branding or thematic preferences.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_6.jpg" alt="Selecting Advanced Colors" />
</Frame>

## Configuring Highlight Color

The highlight color defaults to orange but can be fully customized to any color preference, allowing you to emphasize captions according to your style guidelines.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_7.jpg" alt="Word Highlight Settings" />
</Frame>

## Personalizing Highlight Colors

Select a different highlight color to personalize the appearance of captions, providing greater flexibility in visual presentation.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_8.jpg" alt="Custom Accent Selection" />
</Frame>

## Managing Background Box Visibility

Enable or disable the background box for captions. Changes are reflected immediately in the preview area, allowing you to assess visibility and style impact.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_9.jpg" alt="Toggling Text Background Box" />
</Frame>

## Background Box Color Options

If the background box is enabled, it defaults to a black fill color, which you can change to any color that suits your project aesthetics.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_10.jpg" alt="Background Fill Color Options" />
</Frame>

## Adjusting Background Fill and Opacity

Set the background fill color to options like white and fine-tune opacity levels to enhance caption visibility against various video backgrounds.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_11.jpg" alt="Opacity and Custom Fills" />
</Frame>

## Applying Caption Settings

After configuring caption preferences, click the **Apply** button to save all changes and update captions in your project accordingly.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_12.jpg" alt="Clicking Apply to Captions" />
</Frame>

## Confirmation of Caption Addition

Once applied, captions are successfully integrated into your project, ready for display during playback.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_13.jpg" alt="Saved Captions Confirmation" />
</Frame>

## Reviewing Caption Functionality

Verify how captions perform within your project environment to ensure proper display and synchronization with content.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_14.jpg" alt="Timeline Sync Check" />
</Frame>

## Previewing Captions During Playback

Play the video project to observe caption appearance, assessing timing, legibility, and design compliance.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_15.jpg" alt="Video Playback Preview" />
</Frame>

## Sample Caption Content Display

Sample captions showcase introductory content, demonstrating effective caption integration for user comprehension.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_16.jpg" alt="Live Active Caption Sample" />
</Frame>

## Identifying Caption Background Clarity Issues

Evaluate caption backgrounds for clarity; insufficient contrast or visibility prompts adjustments for better user experience.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_17.jpg" alt="Reviewing Contrast Layout" />
</Frame>

## Modifying Background Color for Clarity

In background settings, change the background color from gray to black or another preferred color to enhance caption readability.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_18.jpg" alt="Editing Box Color Background" />
</Frame>

## Selecting Improved Background Color

Choose black as the background color to provide better contrast between captions and video content for clearer viewing.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_19.jpg" alt="Setting High-Contrast Black" />
</Frame>

## Reapplying Updated Settings

Click **Apply** again to confirm and implement background color changes for captions, updating their appearance immediately.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_20.jpg" alt="Re-applying Updates" />
</Frame>

## Assessing Updated Caption Display

Play the video to evaluate how updated background settings improve caption clarity and overall presentation.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_21.jpg" alt="Verifying Enhanced Contrast" />
</Frame>

## Switching Caption Styles

Select alternative caption styles as needed to match project preferences, including options without background boxes for varied visual effects.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_22.jpg" alt="Selecting Frameless Layouts" />
</Frame>

## Confirming Caption Style Changes

After selecting a different caption style, click **Apply** to confirm and activate the new style in your project.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_23.jpg" alt="Applying Style Alternative" />
</Frame>

## Demonstrating Captions In Action

Play the project to view captions in the chosen style, ensuring effective communication and alignment with project needs.

<Frame>
  <img src="https://storage.googleapis.com/dk-transcoder-assets/seller/2d1690e8-a425-4baf-82d4-7c59b8aca885/studio/a839a2e9-5d56-4fb3-a572-9415c9c75fea/video_screenshot_file/frame_24.jpg" alt="New Style Render Verification" />
</Frame>
