Mã Nhúng Iframe — Một Thẻ, Mọi Nền Tảng

Mã Nhúng Iframe

Mỗi video trên AVCaption nhận một mã iframe duy nhất:

<iframe
  src="https://avcaption.com/watch/{your_embed_token}"
  frameborder="0"
  allow="autoplay; encrypted-media; fullscreen"
  allowfullscreen
  loading="lazy"
  width="100%"
  style="aspect-ratio: 16/9"
></iframe>

Dán lên bất kỳ nền tảng nào chấp nhận HTML. Vậy thôi.

Nơi nó chạy

CMS / Blog

  • WordPress (block Custom HTML, block Code, HTML thô trong bài viết)
  • Ghost (HTML card)
  • Substack (HTML trong bài, kể cả bài trả phí)
  • Medium (hạn chế — chỉ bookmark card, không iframe)
  • Hashnode (block Embed)

LMS / Nền tảng khoá học

  • Teachable (block Video chấp nhận mã iframe qua “Custom Code”)
  • Thinkific (block Custom Code)
  • Kajabi (block HTML trong bài và trang sản phẩm)
  • LearnDash (HTML trong nội dung bài học)
  • LearnWorlds (block Embed)
  • Podia (Custom HTML)

Trình tạo no-code

  • Webflow (element Embed)
  • Bubble (element HTML)
  • Wix (block HTML iframe)
  • Squarespace (block Code)
  • Carrd (Embed section)
  • Framer (component Embed)

Productivity / Knowledge

  • Notion (lệnh slash /embed)
  • Coda (Embed)
  • ClickUp (Embed view)

Email — hạn chế. Hầu hết email client chặn iframe (Gmail, Outlook). Hãy gửi link kèm preview og:image thay thế.

Tham số URL

Thêm query parameter vào src của iframe:

  • ?autoplay=1&muted=1 — phát ngay khi load (muted bắt buộc cho autoplay)
  • ?start=120 — nhảy đến giây 120
  • ?subtitle=vi — chọn sẵn phụ đề tiếng Việt
  • ?quality=1080 — ép biến thể 1080p
  • ?loop=1 — phát lại khi kết thúc
  • ?controls=0 — ẩn mọi điều khiển (chế độ kiosk)

Kết hợp nhiều: ?autoplay=1&muted=1&start=30&subtitle=es.

Header bảo mật

Iframe trả về:

  • Content-Security-Policy: frame-ancestors {your_whitelist} — trình duyệt chặn nhúng trên origin ngoài whitelist
  • Referrer-Policy: strict-origin — thông tin referrer giới hạn ở scheme+host
  • Permissions-Policy: autoplay=*; fullscreen=* — cần thiết để thuộc tính allow hoạt động

Bạn không phải cấu hình gì — AVCaption đặt header đúng dựa trên whitelist domain của bạn.

Hiệu năng

  • First paint: 600-900ms trên 4G mobile, dưới 300ms trên broadband
  • HLS.js + JS player: ~60KB minified+gzipped
  • Segment đầu pre-warm khi upload, phục vụ từ edge CDN
  • loading="lazy" hoãn tải iframe đến khi user cuộn gần (khuyến nghị)

Kích thước responsive

Iframe responsive hoàn toàn khi bạn dùng width="100%"aspect-ratio: 16/9. Video scale theo container, đó là điều bạn muốn ở hầu hết site.

Cho kích thước pixel cố định: width="800" height="450" (hoặc bất kỳ tỉ lệ 16:9).

Cho video không phải 16:9 (ví dụ 4:3 phim cũ): đặt aspect-ratio: 4/3 để khớp nguồn.

Bắt đầu

Mọi video upload lên AVCaption đều có mã iframe trong trang chi tiết video. Upload một video test, copy iframe, paste vào doc Notion hoặc draft blog post — embed render giống y hệt như khi nó chạy trên Teachable, Kajabi, trang Confluence, Salesforce Community, hay site riêng của bạn. Target nhúng production phổ biến: host video cho LMS, khoá học online, sản phẩm số.

Câu hỏi thường gặp

Mã nhúng iframe có chạy trên WordPress không? +
Có. Dán vào block Custom HTML, block Code, hoặc trực tiếp trong HTML bài viết. Việc WordPress lọc thẻ script không ảnh hưởng đến iframe.
Có chạy trong LMS như Teachable, Thinkific, Kajabi không? +
Có. Mọi nền tảng LMS lớn đều hỗ trợ iframe nhúng. Một số có block 'video embed' riêng; số khác chấp nhận HTML thô — cả hai đều chạy.
Còn Notion, Substack, Ghost, Bubble? +
Notion hỗ trợ iframe qua lệnh slash /embed. Substack hỗ trợ iframe trong newsletter trả phí. Ghost có block HTML tuỳ chỉnh. Bubble có element HTML. Tất cả đều chạy.
← content.back_to_index