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 whitelistReferrer-Policy: strict-origin— thông tin referrer giới hạn ở scheme+hostPermissions-Policy: autoplay=*; fullscreen=*— cần thiết để thuộc tínhallowhoạ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%" và 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ố.