Tạo mã HTML iframe với các tùy chọn tùy chỉnh như kích thước, viền, toàn màn hình, và lazy loading. Hữu ích cho việc nhúng video, bản đồ, hoặc nội dung từ website khác.
1. Nhập URL của trang muốn nhúng (bắt buộc).
2. Điều chỉnh Width (100%, 600px, 50vw...) và Height (500, 400px...).
3. Thêm Title mô tả nội dung iframe (tốt cho SEO và accessibility).
4. (Tùy chọn) Đặt Name để tham chiếu iframe trong JavaScript.
5. Chọn các tùy chọn: viền, toàn màn hình, lazy loading.
6. Nhấn Tạo mã và copy HTML code.
7. Nhấn "Xử lý" (hoặc tên button tương ứng) hoặc phím tắt Ctrl+Enter.
8. Sao chép kết quả hoặc nhấn Ctrl+K để xóa.
• Width/Height: Có thể dùng px, %, vw, vh (VD: 100%, 600px, 80vw)
• Title: Giúp screen readers hiểu nội dung iframe (accessibility)
• Name: ID duy nhất để JavaScript truy cập iframe
• Show Border: Hiển thị viền xung quanh iframe (mặc định: không)
• Allow Fullscreen: Cho phép xem toàn màn hình (quan trọng với video)
• Lazy Loading: Chỉ tải iframe khi scroll đến (tiết kiệm băng thông)
Iframe (Inline Frame) là thẻ HTML cho phép nhúng một trang web khác vào trang hiện tại. Các use case phổ biến:
Video: Nhúng YouTube, Vimeo
Bản đồ: Google Maps, OpenStreetMap
Social Media: Facebook posts, Twitter timeline
Widgets: Calendly, Typeform, chat widgets
Nội dung bên ngoài: Blog posts, landing pages
URL: https://www.youtube.com/embed/dQw4w9WgXcQ
Width: 100%
Height: 400
Options: ✅ Allow Fullscreen, ✅ Lazy Loading
Kết quả:
<iframe src="..." width="100%" height="400" loading="lazy" allowfullscreen></iframe>
URL: https://www.google.com/maps/embed?pb=...
Width: 600
Height: 450
Title: "Bản đồ văn phòng"
Options: ✅ Lazy Loading
✅ Luôn thêm title attribute để cải thiện accessibility
✅ Dùng lazy loading để tăng tốc độ tải trang
✅ Set width responsive (100%, 80vw) thay vì pixel cố định
✅ Allow fullscreen cho video để UX tốt hơn
⚠️ Kiểm tra CORS - Không phải website nào cũng cho phép iframe
⚠️ Security: Chỉ nhúng từ nguồn tin cậy (tránh XSS attacks)
