---
title: TikTok Videos
description: "## Overview The **TikTok Videos** widget lets you showcase your TikTok content on any WordPress page built with Elementor. Display video thumbnails in a responsive **slider** or **gallery grid**, with automatic thumbnail fetching from TikTok and one-click bulk import to your media library for faster loading. --- ## Getting Started 1. Open any page in **Elementor Editor** 2. Search for **\"TikTok Videos\"** in the widget panel (under the PistonUI category) 3. Drag…"
url: "https://pistonui.com/docs/tiktok-videos/"
updated: "2026-02-07"
category: Widgets
---

# TikTok Videos

## Overview

The **TikTok Videos** widget lets you showcase your TikTok content on any WordPress page built with Elementor. Display video thumbnails in a responsive **slider** or **gallery grid**, with automatic thumbnail fetching from TikTok and one-click bulk import to your media library for faster loading.

---

## Getting Started

1. Open any page in **Elementor Editor**
2. Search for **"TikTok Videos"** in the widget panel (under the PistonUI category)
3. Drag the widget onto your page
4. Add your TikTok video URLs in the **TikTok Video List** section
5. Click **"Import All TikTok Images"** to download thumbnails to your media library
6. Save the page

---

## Layout Settings

### Display Mode

Choose how your TikTok videos are displayed:

| Option | Description |
| --- | --- |
| **Slider** | Horizontal carousel powered by Owl Carousel. Supports autoplay, navigation arrows, dots, and responsive item counts. |
| **Gallery Grid** | CSS Grid layout with configurable columns and gap. Ideal for a static portfolio-style display. |

### Gallery Grid Options

*(Visible when Display Mode is set to Gallery)*

- **Gallery Columns** — Number of columns per row (1–8). Responsive controls for desktop, tablet, and mobile.
- **Gallery Gap** — Spacing between grid items (0–50px).

### Slider Options

*(Visible when Display Mode is set to Slider)*

| Setting | Description | Default |
| --- | --- | --- |
| **Show Navigation Arrows** | Toggle left/right arrow buttons | On |
| **Show Dots** | Toggle pagination dots below the slider | Off |
| **Autoplay** | Automatically cycle through slides | On |
| **Autoplay Speed** | Time between slides in milliseconds (500–10,000) | 3000ms |
| **Infinite Loop** | Continuously loop through slides | On |
| **Slider Gap** | Space between slider items (0–50px) | 10px |

### Responsive Items (Slider)

Control how many items are visible at each breakpoint:

| Breakpoint | Label | Default |
| --- | --- | --- |
| < 576px | Items (Mobile) | 1 |
| 576–767px | Items (Tablet Portrait) | 2 |
| 768–991px | Items (Tablet Landscape) | 3 |
| ≥ 992px | Items (Desktop) | 6 |

### Shared Options

- **Item Height** — Set a uniform height for all items (100–800px or 10–100vh). Images are cropped with `object-fit: cover` to maintain aspect ratio. Default: 350px.
- **Image Size** — Choose the WordPress image size used for thumbnails. Smaller sizes load faster.

| Size | Resolution | Best For |
| --- | --- | --- |
| Thumbnail | 150×150 | Small grids, fast loading |
| Medium | 300×300 | Compact layouts |
| **Medium Large** | 768px wide | Most use cases (default) |
| Large | 1024px wide | Large displays |
| Full Size | Original upload | Maximum quality |

---

## TikTok Video List

### Adding Videos

Each item in the repeater has two fields:

- **Thumbnail (optional)** — Upload a custom image from your media library. This takes highest priority.
- **TikTok URL** — The full TikTok video URL (e.g., `https://www.tiktok.com/@username/video/1234567890`).

### Thumbnail Priority

The widget uses a smart fallback system for thumbnails:

1. **User-uploaded thumbnail** — Manually uploaded image via the media control (highest priority)
2. **Imported image** — Thumbnail imported via the bulk import button
3. **TikTok API** — Automatically fetched from TikTok's oEmbed API (slowest, used as fallback)

### Bulk Import TikTok Images

Instead of relying on the TikTok API for thumbnails on every page load (which is slow), you can import all thumbnails directly into your WordPress media library:

1. Add your TikTok URLs to the repeater
2. Click **"Import All TikTok Images"** at the top of the Video List section
3. A progress bar shows the import status for each video
4. Once complete, click **"Save Now"** to save the imported thumbnails
5. Thumbnails are now served from your own server — much faster!

> **Tip:** Imported images are stored in your WordPress Media Library with the alt text "TikTok Video Thumbnail". You can find and manage them there at any time.

---

## Style Tab

### Item Style

- **Border Radius** — Round the corners of each video card. Supports px and %. Default: 10px (all corners).
- **Hover Effect** — Choose an animation when users hover over a video card:
  - **None** — No effect
  - **Scale Up** — Subtle zoom-in effect (default)
  - **Brighten** — Increases brightness
  - **Shadow** — Adds a drop shadow

### Navigation Style

*(Visible when Slider mode + Navigation Arrows are enabled)*

- **Arrow Color** — Color of the SVG chevron icons inside the navigation buttons. Default: `#ffffff`.
- **Arrow Background** — Background color of the circular navigation buttons. Default: `rgba(0,0,0,0.5)`.
- **Arrow Size** — Diameter of the navigation buttons (20–60px). The icon scales proportionally. Default: 40px.