Tạo mã nhúng co giãn (YouTube, Vimeo, Maps, Calendly) | We.Inc
Dán liên kết YouTube, Vimeo, Google Maps, Calendly, Spotify, Loom hoặc Google Forms để tạo mã iframe co giãn, tải lười, có tiêu đề hỗ trợ truy cập, xem trước trực tiếp và ghi chú quyền riêng tư.
Dán liên kết từ nhà cung cấp được hỗ trợ, chọn tỷ lệ khung hình và đặt tiêu đề cho nội dung nhúng. Bạn nhận mã iframe tự co theo chiều rộng màn hình, chỉ tải khi khách cuộn đến gần và có tiêu đề cho người dùng trình đọc màn hình. Bản xem trước trực tiếp cho thấy kết quả; ghi chú của từng nhà cung cấp nêu thông tin họ có thể theo dõi và tùy chọn thân thiện với quyền riêng tư nếu có. Mọi thứ chạy trong trình duyệt. Nội dung bạn nhập hoặc tải lên không được gửi đến We.Inc hay bất kỳ ai khác.
Dán liên kết: video YouTube hoặc Vimeo, liên kết nhúng Google Maps, trang đặt lịch Calendly, bài hát hoặc danh sách phát Spotify, video Loom hoặc biểu mẫu Google Forms.
Công cụ nhận diện nhà cung cấp và đổi liên kết sang địa chỉ nhúng chính thức của họ. Liên kết không nhận diện được sẽ bị từ chối thay vì đoán.
Chọn tỷ lệ khung hình (16:9 cho video, 4:3, 1:1 hoặc chiều cao cố định cho trang đặt lịch và biểu mẫu) rồi viết tiêu đề mô tả nội dung nhúng.
Chọn cách tải. Mặc định bật tải lười để nội dung nhúng không làm chậm lần hiển thị đầu tiên của trang.
Kiểm tra bản xem trước trực tiếp rồi sao chép HTML. Ghi chú nhà cung cấp cho biết nội dung nào nên nêu trong thông báo quyền riêng tư hoặc cookie.
Đặt tiêu đề mô tả nội dung cho mọi iframe, chẳng hạn “Bản đồ đến cửa hàng của chúng tôi trên phố King”. Trình đọc màn hình sẽ đọc tiêu đề này.
Dùng youtube-nocookie.com cho video YouTube. Cách này tránh đặt cookie YouTube cho đến khi khách nhấn phát.
Đặt nội dung nhúng nặng dưới màn hình đầu tiên hoặc bật tải lười; mỗi nội dung sẽ tải cả một trang từ website khác.
Tiện ích đặt lịch, trò chuyện và biểu mẫu là sản phẩm của nhà cung cấp, không phải website của bạn. Điều khoản và cách họ xử lý dữ liệu sẽ được áp dụng.
Với Google Maps, chọn Chia sẻ rồi Nhúng bản đồ và sao chép địa chỉ bên trong src. Liên kết Maps thông thường không thể nhúng.
Câu hỏi thường gặp
Làm iframe co giãn theo màn hình như thế nào?
Bọc iframe trong vùng chứa có thuộc tính aspect-ratio (ví dụ 16 / 9) và width: 100%, rồi cho iframe lấp đầy vùng đó. Website cũ thường dùng thủ thuật padding-top; mọi trình duyệt hiện nay đều hỗ trợ aspect-ratio. Công cụ này tạo phiên bản hiện đại.
Công cụ hỗ trợ những nhà cung cấp nào?
YouTube (bao gồm Shorts và liên kết youtu.be), Vimeo, liên kết nhúng Google Maps, Calendly, Spotify, Loom và Google Forms. Mỗi dịch vụ có địa chỉ nhúng được ghi rõ. Liên kết khác sẽ bị từ chối để công cụ không tạo mã không hoạt động.
Tải lười có ảnh hưởng đến nội dung nhúng không?
Không. loading="lazy" yêu cầu trình duyệt chỉ tải iframe khi nội dung sắp đi vào vùng hiển thị. Khách cuộn đến đó vẫn thấy nội dung tải bình thường.
We.Inc có cung cấp tính năng đặt lịch hoặc trò chuyện không?
Không. Calendly và dịch vụ tương tự là dịch vụ riêng, bạn cần đăng ký trực tiếp với họ. Công cụ này chỉ tạo mã để hiển thị tiện ích của họ trên trang.
Vì sao liên kết Google Maps không dùng được?
Liên kết maps.google.com và goo.gl thông thường chặn nhúng. Mở địa điểm trong Google Maps, chọn Chia sẻ rồi Nhúng bản đồ và dán địa chỉ trong phần src của mã được hiển thị.
Nội dung nhúng khiến khách truy cập phải tải gì
Nội dung nhúng là một cửa sổ nhỏ mở trang của công ty khác. Nó tải mã của họ, có thể đặt cookie và làm trang nặng hơn. Việc này thường đáng làm nhưng cần có chủ ý: bật tải lười cho nội dung dưới màn hình đầu tiên, dùng chế độ tăng cường quyền riêng tư nếu có và đề cập nội dung nhúng của bên thứ ba trong thông báo quyền riêng tư.
Nội dung nhúng dễ tiếp cận
Trình đọc màn hình thông báo iframe bằng tiêu đề. Nếu không có tiêu đề, khách chỉ nghe từ “khung” mà không biết nội dung gì. Tiêu đề rõ ràng, liên kết văn bản đến cùng nội dung bên dưới khung và phụ đề cho video giúp mọi người sử dụng nội dung nhúng.