Hướng dẫn cách nhúng iFrame vào WordPress không cần code (2025)

Bạn muốn nhúng một video YouTube, bản đồ Google Maps hay biểu mẫu từ dịch vụ bên thứ ba vào website WordPress của mình? iFrame chính là giải pháp đơn giản và hiệu quả giúp bạn thực hiện điều đó mà không cần kiến thức lập trình chuyên sâu. Trong bài viết này, Tino sẽ hướng dẫn chi tiết cách nhúng iFrame vào WordPress, đảm bảo tương thích với mọi trình soạn thảo như Gutenberg hay Classic Editor. Cùng bắt đầu nhé!

Đôi nét về iFrame

iFrame là gì?

iFrame (viết tắt của inline frame) là một thẻ HTML cho phép bạn nhúng nội dung từ một website khác vào trang web của mình, giống như “gắn một cửa sổ nhỏ” để hiển thị nội dung bên ngoài. Người dùng có thể nhìn thấy và tương tác với một trang web hoàn toàn khác, mà không cần rời khỏi trang chính.

Hiểu đơn giản:

Khi bạn muốn hiển thị một video YouTube, bản đồ Google Maps hay một biểu mẫu Google Form ngay trên trang web của mình, thay vì phải bấm vào liên kết để chuyển sang trang khác, bạn có thể nhúng trực tiếp nội dung đó vào trang nhờ iFrame.

Nội dung hiển thị bên trong iFrame vẫn được tải từ máy chủ gốc, nên bạn không cần lưu trữ nội dung đó trên website của mình.

Tại sao nên sử dụng iFrame?

• Dễ dàng tích hợp nội dung từ bên thứ ba: Bạn có thể nhúng nhanh video YouTube, bản đồ Google Maps, biểu mẫu Google Form, biểu đồ tương tác hoặc nội dung từ các công cụ bên ngoài mà không cần lập trình phức tạp.
• Giữ website gọn nhẹ, tải nhanh hơn: iFrame giúp tách biệt nội dung được nhúng với phần còn lại của website. Điều này giúp giảm tải cho máy chủ của bạn vì nội dung vẫn được lưu trữ và xử lý trên máy chủ gốc.
• Tránh xung đột mã hoặc plugin: Nội dung trong iFrame chạy độc lập, do đó giảm nguy cơ xung đột với mã nguồn hoặc plugin đang hoạt động trên WordPress của bạn.
• Hỗ trợ hiển thị linh hoạt trên nhiều thiết bị: Nếu được cấu hình đúng cách, iFrame có thể hiển thị tương thích và responsive trên cả máy tính và thiết bị di động.
• Thao tác nhanh chóng, không cần kiến thức lập trình: Chỉ với vài dòng mã HTML đơn giản, bạn đã có thể hiển thị nội dung ngoài mong muốn mà không cần cài đặt thêm plugin hay viết mã phức tạp.

Cách nhúng iFrame vào WordPress

Cách nhúng iFrame bằng mã nhúng và khối Custom HTML

Nếu bạn muốn chèn iFrame vào WordPress mà không cần cài plugin, cách nhanh nhất là sử dụng mã nhúng (embed code) kết hợp với khối Custom HTML trong trình soạn thảo.

Phương pháp này rất phù hợp để nhúng nội dung từ các mạng xã hội như YouTube, Facebook, Instagram vì một số nền tảng có thể giới hạn việc tự tạo iFrame thủ công.

Ví dụ: Cách nhúng video YouTube vào WordPress

Làm theo các bước sau:

Bước 1: Truy cập video YouTube bạn muốn nhúng.

Bước 2: Nhấp vào nút Chia sẻ (Share) dưới video.

Bước 3: Trong hộp thoại hiện ra, chọn mục Nhúng (Embed).

Sao chép đoạn mã iFrame được cung cấp. Bạn có thể điều chỉnh các tham số như chiều rộng (width) và chiều cao (height) nếu muốn.

Bước 4: Mở trang hoặc bài viết WordPress, nhấp vào biểu tượng (+) để thêm khối Custom HTML.

Dán đoạn mã iFrame vừa sao chép vào khối này.

Nhấn qua tab Xem trước (Preview) để kiểm tra hiển thị.

Bạn cũng có thể áp dụng cách này cho các nền tảng khác như Facebook, LinkedIn, Instagram, Twitter…

Cách nhúng iFrame bằng plugin WordPress

Nếu bạn thường xuyên cần nhúng nội dung bên ngoài hoặc không quen dùng mã HTML, bạn nên sử dụng plugin hỗ trợ. Một trong những plugin tốt nhất hiện nay là Advanced iFrame.

Các bước thực hiện:

Bước 1: Truy cập Bảng điều khiển WordPress → Plugin → Cài mới, tìm và cài đặt Advanced iFrame.

Bước 2: Sau khi kích hoạt, vào mục Advanced iFrame → chuyển đến tab Options.

Tại đây, bạn có thể cấu hình nhiều thiết lập hiển thị như ẩn các phần tử, truyền tham số, chỉ hiển thị iFrame sau khi tải xong,…

Trước khi nhúng iFrame, bạn có thể sử dụng công cụ kiểm tra miễn phí của plugin để xem URL bạn định nhúng có bị chặn bởi mã bảo mật hay không.

Bước 3: Trở về tab Basic Settings, điền URL cần nhúng, thiết lập chiều rộng, chiều cao và các tùy chọn khác nếu cần.

Bước 4: Nhấp vào nút Generate a shortcode để tạo mã shortcode.

Dán shortcode này vào khối Shortcode trong bài viết hoặc trang.

Nhấn Xem trước (Preview) để kiểm tra kết quả hiển thị trên website.

Cách nhúng iFrame thủ công bằng mã HTML

Đây là phương pháp phù hợp nếu bạn muốn toàn quyền kiểm soát cách hiển thị iFrame trên trang. Tuy nhiên, hãy lưu ý:

• Một số nền tảng như Facebook hoặc Instagram không cho phép nhúng thủ công bằng iFrame.
• Website của bạn phải dùng cùng giao thức với website nguồn (HTTPS – HTTPS).

Cách thực hiện:

Bước 1: Truy cập bài viết hoặc trang WordPress → chèn khối Custom HTML.

Bước 2: Thêm thẻ mở và đóng iFrame với URL bạn muốn nhúng:

<iframe src="https://example.com"></iframe>

Nếu muốn điều chỉnh kích thước hiển thị, bạn có thể thêm thuộc tính như sau:

<iframe src="https://example.com" width="700" height="900"></iframe>

Thay https://example.com bằng liên kết bạn muốn nhúng.

Bước 3: Nhấp vào Xem trước để kiểm tra hiển thị iFrame. Nếu mọi thứ ổn, bạn có thể xuất bản hoặc cập nhật trang.

Kết luận

Nhúng iFrame vào WordPress là một thao tác đơn giản nhưng cực kỳ hữu ích, giúp bạn tích hợp linh hoạt các nội dung ngoài vào website mà không ảnh hưởng đến tốc độ tải trang hay cấu trúc sẵn có. Hy vọng qua hướng dẫn trên, bạn đã có thể tự tin nhúng iFrame vào bất kỳ bài viết, trang hoặc widget nào trên website của mình. Chúc bạn thành công!

Những câu hỏi thường gặp