---
title: "Hình ảnh, video và biểu tượng"
description: "Thêm các phần tử hình ảnh, video và biểu tượng vào màn hình trong Flow Builder, và hoán đổi media lúc chạy bằng custom media ID."
---

Flow Builder bao gồm ba loại phần tử media thuộc danh mục **Media**: Image, Video và Icon.

## Hình ảnh \{#image\}

Tải lên tệp `.JPG`, `.PNG` hoặc `.GIF` tối đa 20 MB.

- **Aspect** — kiểm soát cách hình ảnh vừa với container của nó:
  - **Fit** — thu phóng hình ảnh để vừa khít bên trong container mà không cắt xén.
  - **Fill** — kéo giãn hình ảnh để lấp đầy container.
  - **Cover** — thu phóng hình ảnh để che phủ container, cắt xén nếu cần. Mặc định.
- **Use custom media ID** — xem [Custom media ID](#custom-media-id) bên dưới.

## Video \{#video\}

Tải lên tệp `.MP4` hoặc `.WEBM` tối đa 50 MB.

- **Aspect** — Fit, Fill hoặc Cover. Mặc định là Fill.
- **Loop** — phát lại video liên tục. Bật theo mặc định.
- **Use custom media ID** — xem [Custom media ID](#custom-media-id) bên dưới.

Video không phát trong bản xem trước trên editor — canvas chỉ hiển thị một khung hình tĩnh. Trên thiết bị lúc chạy, video phát ở chế độ tắt tiếng theo mặc định. Khi bật Loop, video lặp lại vô thời hạn.

### Kích hoạt hành động khi video kết thúc \{#trigger-an-action-when-the-video-ends\}

:::link
Bài viết chính: [Hành động](onboarding-actions)
:::

Phần tử Video hỗ trợ trigger **On playback finished** kích hoạt khi video phát đến cuối. Thiết lập nó trong bảng **Interactions** để điều hướng đến màn hình khác, hiển thị CTA, hoặc thực hiện bất kỳ hành động nào khác.

## Biểu tượng \{#icon\}

Chọn từ thư viện [Tabler Icons](https://tabler.io/icons) được tích hợp sẵn, với hàng nghìn biểu tượng theo hai phong cách hiển thị:

- **Stroke** — chỉ viền ngoài.
- **Filled** — tô đặc.

Tìm kiếm trong bộ chọn bằng từ khóa để tìm biểu tượng. Đặt màu cho biểu tượng trong bộ chọn **Color** — chọn [kiểu màu](builder-styling) đã lưu hoặc đặt màu tùy chỉnh.

## ID phương tiện tùy chỉnh \{#custom-media-id\}

:::important
Bạn cũng có thể đặt ID phương tiện tùy chỉnh cho [nền](paywall-head-picture) hình ảnh và video.
:::

Gắn thẻ một phần tử hình ảnh hoặc video với ID phương tiện tùy chỉnh để thay thế nó lúc chạy từ code ứng dụng của bạn. Dùng tính năng này cho [hình ảnh được cá nhân hóa](get-pb-paywalls#customize-assets) — ví dụ: hiển thị avatar mà người dùng đã chọn.

Phương tiện bạn tải lên trong Flow Builder sẽ đóng vai trò dự phòng. Nếu code của bạn không cung cấp phương tiện cho ID đó lúc chạy, thì nội dung dự phòng sẽ được hiển thị thay thế.

Để bật ID phương tiện tùy chỉnh cho phần tử Hình ảnh hoặc Video:
1. Chọn hộp kiểm **Use custom media ID** bên dưới khu vực tải lên.
2. Nhập media ID.
3. Tải lên ảnh hoặc video dự phòng.

Trong code ứng dụng của bạn, lấy media theo ID của nó — xem [Tùy chỉnh assets](get-pb-paywalls#customize-assets) để biết SDK API.