# Add TikTok Overlay to Videos

[View original](https://ittybit.com/guides/add-tiktok-overlay-to-videos)

***

## title: Add TikTok Overlay to Videos

You can use the `layers` prop to add a TikTok-style overlay to your videos.

<Tabs groupId="language" items={["typescript", "python", "ruby", "php", "go", "fetch" ]} persist>
  <Tab value="typescript">
    ```js
    const user = {
      name: 'Top Creator',
      username: 'topcreator',
      // ... other user fields
    }

    const task = await ittybit.tasks.create({
      kind: 'video',
      url: 'https://ittyb.it/sample.mp4',
      layers: [
        {
          kind: 'image',
          url: 'https://ittyb.it/icon.png',
          width: 80,
          height: 80,
          top: 20,
          left: 20,
        },
        {
          kind: 'text',
          text: `@${user.username}`,
          font: 'Inter',
          font_size: 20,
          color: '#ffffff',
          top: 120,
          left: 20,
        }
      ],
    });
    ```
  </Tab>

  <Tab value="python">
    ```python
    user = {
      'name': 'Top Creator',
      'username': 'topcreator',
      # ... other user fields
    }

    task = ittybit.tasks.create(
      kind='video',
      url='https://ittyb.it/sample.mp4',
      layers=[
        {
          'kind': 'image',
          'url': 'https://ittyb.it/icon.png',
          'width': 80,
          'height': 80,
          'top': 20,
          'left': 20,
        },
        { 
          'kind': 'text',
          'text': f'@${user["username"]}',
          'font': 'Inter',
          'font_size': 20,
          'color': '#ffffff', 
          'top': 120,
          'left': 20,
        }
      ]
    )
    ```
  </Tab>

  <Tab value="ruby">
    ```ruby
    user = {
      name: 'Top Creator',
      username: 'topcreator',
      # ... other user fields
    }

    task = ittybit.tasks.create(
      kind: 'video',
      url: 'https://ittyb.it/sample.mp4',
      layers: [
        {
          kind: 'image',
          url: 'https://ittyb.it/icon.png',
          width: 80,
          height: 80,
          top: 20,
          left: 20,
        },
        {
          'kind': 'text',
          'text': "@#{user['username']}",
          'font': 'Inter',
          'font_size': 20,
          'color': '#ffffff',
          'top': 120,
          'left': 20,
        }
      ]
    )
    ```
  </Tab>

  <Tab value="php">
    ```php
    $user = [
      'name' => 'Top Creator',
      'username' => 'topcreator',
      // ... other user fields
    ];

    $task = $ittybit->tasks->create([
        'kind' => 'video',
        'url' => 'https://ittyb.it/sample.mp4',
        'layers' => [
            [
                'kind' => 'image',
                'url' => 'https://ittyb.it/icon.png',
                'width' => 80,
                'height' => 80,
                'top' => 20,
                'left' => 20,
            ],
            [ 
                'kind' => 'text',
                'text' => "@" . $user['username'],
                'font' => 'Inter',
                'font_size' => 20,
                'color' => '#ffffff',
                'top' => 120,
                'left' => 20,
            ]
        ]
    ]);
    ```
  </Tab>

  <Tab value="go">
    ```go
    user := ittybit.User{
      Name: "Top Creator",
      Username: "topcreator",
      // ... other user fields
    }

    task, err := ittybit.Tasks.Create(
        context.Background(),
        &ittybit.TaskCreateParams{
            Kind: "video",
            URL: "https://ittyb.it/sample.mp4",
            Layers: []ittybit.Layer{
                {
                    Kind: "image",
                    URL: "https://ittyb.it/icon.png",
                    Width: 80,
                    Height: 80,
                    Top: 20,
                    Left: 20,
                },
                {
                    Kind: "text",
                    Text: "@" + user.Username,
                    Font: "Inter",
                    FontSize: 20,
                    Color: "#ffffff",
                    Top: 120,
                    Left: 20,
                }
            },
        },
    )
    ```
  </Tab>

  <Tab value="fetch">
    ```js
    const user = {
      name: 'Top Creator',
      username: 'topcreator',
      // ... other user fields
    }

    const task = await fetch('https://api.ittybit.com/tasks', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${ITTYBIT_API_KEY}` },
      body: JSON.stringify({ 
        kind: 'video', 
        url: 'https://ittyb.it/sample.mp4',
        layers: [
          {
            kind: 'image',
            url: 'https://ittyb.it/icon.png',
            width: 80,
            height: 80,
            top: 20,
            left: 20,
          },
          {
            kind: 'text',
            text: `@${user.username}`,
            font: 'Inter',
            font_size: 20,
            color: '#ffffff',
            top: 120,
            left: 20, 
          }
        ]
      })
    })
    ```
  </Tab>
</Tabs>

*(See [SDKs](/sdks) for install and initialization steps.)*