Thẻ iFrame trong HTML

• Trần Ngọc Thanh
• 807
• 22/02/2025

Thẻ iframe trong HTML dùng để nhúng các website khác hoặc trang web trên chính website của bạn, video từ youtube, bản đồ, các file tài liệu từ website, chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Thẻ iFrame trong HTML

Thẻ <iframe> trong HTML dùng để nhúng các website khác hoặc trang web trên chính website của bạn, video từ youtube, bản đồ, các file tài liệu từ website hoặc từ Google Drive,... để hiện lên một vùng nào đó nằm trên trang web của chính mình, cho phép người dùng xem được nội dung, tương tác với nội dung mà không cần phải rời khỏi trang web.

Cú pháp của Thẻ iFrame trong HTML

<iframe src="duongdan" width="chieurong" height="chieucao" allowfullscreen="giatrifull"></iframe>

src: Chứa duongdan (Đường dẫn cần nhúng)

width: Chứa chieurong (Chiều rộng của Iframe ví dụ 100%, 300px,...).

height: Chứa chieucao (Chiều cao của iframe ví dụ: 300px,100vh,.....)

allowfullscreen: Chứa giatrifull (nếu đặt true thì cho phép click vào xem toàn màn hình, nếu false thì không cho phép).

Bao gồm thẻ mở <iframe> và thẻ đóng </iframe>.

Thẻ <iframe> trong HTML nhúng được những loại nào

Nhúng trang web vào thẻ <iframe>

Bạn có thể nhúng một website khác hoặc có thể nhúng trang web nào đó trên website của chính bạn vào thẻ <iframe>.

<iframe src="https://webmoi.vn/" title="Web Mới" width="100%" height="400"></iframe>

Chạy Thử

Nhúng bản đồ vào thẻ <iframe>

Website thường nhúng bản đồ để cho khách hàng có thể trực tiếp xem địa chỉ của doanh nghiệp và xem chỉ đường.

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15677.140993927555!2d106.5532803!3d10.7894511!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a811fb9c3bfd776!2zV2ViIE3hu5tpIC0gVGhp4bq_dCBL4bq_IFdlYnNpdGU!5e0!3m2!1svi!2s!4v1666675407094!5m2!1svi!2s" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Chạy Thử

Nhúng video trên youtube vào thẻ <iframe>

<iframe width="100%" height="400" src="https://www.youtube.com/embed/X9CGScVRGb0" frameborder="0" allowfullscreen></iframe>

Chạy Thử

Nhúng file từ Google Drive vào thẻ <iframe>

Úp file lên Google Drive xong phân quyền chia sẽ công khai.

Sau đó trở lại danh sách nhấn vào nút 3 chấm rồi vào mở bằng, rồi chọn mở trong thẻ mới.

Bên góc phải trên chọn nút 3 chấm, rồi chọn nhúng mục... Copy iframe hoặc chỉ copy phần nằm trong src:

<iframe src="https://drive.google.com/file/d/1yfCLiP2jyxZsHMAJmlqmwpMszgGGTqw-/preview" width="100%" height="400" allow="autoplay"></iframe>

Chạy Thử

Khi nào nên dùng Thẻ <iframe> trong HTML

Các trường hợp cần thiết hữu ích cho website thì nên dùng thẻ <iframe>, trường hợp nhúng các file hoặc đường dẫn URL từ một website khác mà website đó bị nhiểm virus thì sẽ ảnh hưởng xấu tới website của bạn, nên khi dùng cần phải kiểm tra kỹ lượng xem website kia có bị gì không.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ <iframe> trong HTML.