Thẻ <iframe> – nhúng video, bản đồ và trang web bên ngoài vào HTML

Cập nhật Tháng 8 18, 2025

Bạn có từng thấy một video YouTube hiển thị ngay trong một trang web mà không cần mở tab mới?

Hay một trang web du lịch có nhúng bản đồ Google Maps?

Tất cả những thứ đó đều được tạo ra bằng thẻ <iframe> – viết tắt của inline frame, tức là “khung nằm trong dòng”.

Cú pháp cơ bản của `<iframe>`

<iframe src="https://example.com" width="600" height="400"></iframe>

src: là địa chỉ (URL) của trang bạn muốn nhúng.
width, height: chiều rộng, chiều cao của khung iframe.

Hiểu đơn giản: bạn mở một “cửa sổ nhỏ” trong website của mình, bên trong là một trang web khác.

Ví dụ 1: Nhúng video YouTube

Giả sử bạn muốn nhúng video dạy HTML từ YouTube:

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/UB1O30fR-EE" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

Giải thích:

src: YouTube cung cấp link embed, không phải link xem bình thường.
allowfullscreen: cho phép bật chế độ toàn màn hình.
allow: chỉ định các chức năng video có thể sử dụng.
frameborder="0": loại bỏ viền khung.

Lưu ý: YouTube sẽ cung cấp sẵn đoạn mã iframe khi bạn bấm “Chia sẻ > Nhúng”.

Ví dụ 2: Nhúng Google Maps

<iframe 
  src="https://www.google.com/maps/embed?pb=..." 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Bạn có thể lấy đoạn mã nhúng từ Google Maps bằng cách:

Tìm địa điểm
Bấm vào “Chia sẻ”
Chọn “Nhúng bản đồ”
Sao chép đoạn iframe

Một số lưu ý về iframe

Điều cần nhớ	Giải thích
Một số trang không cho nhúng	Vì lý do bảo mật hoặc bản quyền, một số website sẽ chặn iframe
Iframe có thể bị giới hạn tương tác	Bạn không thể điều khiển trang bên trong hoàn toàn
Không dùng iframe để nhúng nội dung nội bộ thường xuyên	Nếu là nội dung của bạn, nên dùng layout hoặc component

Vấn đề bảo mật (nâng cao)

Trang chủ có thể dùng thuộc tính như sandbox, referrerpolicy, loading để kiểm soát nội dung iframe.

Ví dụ:

<iframe src="..." sandbox loading="lazy"></iframe>

sandbox: giới hạn chức năng của nội dung nhúng
loading="lazy": trì hoãn tải iframe đến khi cuộn tới (tăng tốc độ trang)

Bài thực hành

Tạo file iframe-demo.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Iframe Demo</title>
</head>
<body>
  <h1>Ví dụ nhúng nội dung với iframe</h1>

  <h2>1. Video YouTube</h2>
  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/UB1O30fR-EE" 
    title="HTML Tutorial" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>

  <h2>2. Bản đồ Google Maps</h2>
  <iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen 
    loading="lazy">
  </iframe>
</body>
</html>

Ghi nhớ

Thuộc tính	Tác dụng
`src`	Đường dẫn nội dung nhúng
`width`, `height`	Kích thước khung
`allowfullscreen`	Cho phép hiển thị toàn màn hình
`sandbox`	Giới hạn quyền iframe (bảo mật hơn)
`loading="lazy"`	Tải khi cần (tối ưu tốc độ web)

Bài trước ← Thẻ bảng (<table>, <tr>, <td>, <th>, colspan, rowspan) – hiển thị dữ liệu dạng lưới Bài tiếp theo Thẻ audio, video – cách thêm nhạc, phim vào trang web →

🔗 Bài viết khác trong chuyên mục:

📂 Chuyên mục:

HTML: Phần 2

Thảo luận

Hủy

🔒 Bạn phải đăng nhập để gửi bình luận.