Tùy chỉnh kích thước, vị trí trang web nhúng vào blog/ website bằng thẻ Iframe

Vì một lí do nào đó mà bạn muốn nhúng một trang web, đường dẫn (URL) vào blog, website của bạn và bạn muốn tùy chỉnh vị trí trang web mà bạn muốn nó sẽ hiển thị trên blog/ website của bạn khi nó được nhúng.

Chẵng hạn, bạn muốn nhúng một trang phát nhạc dành cho smartphone như http://m.mp3.zing.vn/ nhưng trang này không cung cấp mã nhúng cho bạn, bạn phải nhúng nó bằng Iframe.

---

Xem thêm:
- [HTML5] Phương pháp hiển thị nội dung một cách ngẫu nhiên V1.1

- [HTML5] Tạo danh sách (playlist) MP3 hoặc video tự động phát ngẫu nhiên

---

Dùng thẻ div để thực hiện điều đó (Dĩ nhiên chúng ta chỉ nên nhúng những trang mà nó cho phép nhúng, những trang không cho phép nhúng nó có cài sẵn mã chống nhúng nên dù bạn có muốn cũng không nhúng được):

<center><div style="width: 1000px; height: 100%;" align="left" scrolling="no">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="website-url" scrolling="no" style="width: 950px; height: 1000px; margin-top: -350px; margin-left: -3px; margin-right: -400px;" frameborder="0"></iframe></div></div></center>

Chỉnh sửa các giá trị in đậm cho phù họp.

1. width: 1000px; height: 100% là chiều rộng, chiều cao của vùng mà trang web sẽ được nhúng vào. Bạn phải đặt giá trị chiều rộng, chiều cao của vùng để nhúng bằng hoặc lớn hơn chiều rộng, chiều cao gốc của trang web được nhúng để nó hiển thị đầu đủ nội dung. Sau đó ta ẩn đi những nội dung mà ta muốn nó sẽ không hiển thị.

2. Ẩn các nội dung mà bạn muốn nó không hiển thị khi được nhúng:

a. width: 950px; height: 1000px là chiều rộng, chiều cao gốc của trang web được nhúng. Bạn phải đặt đúng giá trị chiều rộng, chiều cao gốc của trang được nhúng để nó hiển thị đầy đủ nội dung.

b. margin-top: -350px: Ẩn header của trang web được nhúng tính từ đầu trang trở xuống 350px.

c. margin-left: -3px: Ẩn bên trái trang web được nhúng 3px.

d. margin-right: -400px: Ẩn bên phải trang được nhúng 400px.

e. margin-bottom: -300px: Ẩn phía dưới trang được nhúng 300px.

f. website-url: Địa chỉ trang web được nhúng.

g. scrolling="no": Ẩn thanh trượt.

h. frameborder="0": Đường kẻ khung bằng 0px.

Xem minh họa: (Nhúng một trang trên m.mp3.zing.vn có địa chỉ http://m.mp3.zing.vn/album/Mua-Thu-Niu-Buoc-Em-Ve-Trang-Nhung/ZWZA7F7D.html) bằng đoạn mã như bên dưới:

<center>
<div style="width: 100%; height: 100%;" align="left" scrolling="no">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="http://m.mp3.zing.vn/bai-hat/Mua-Thu-Niu-Buoc-Em-Ve-Trang-Nhung/ZW6UA6UB.html" scrolling="no" style="width: 100%; height: 1000px; margin-top: -45px; margin-left: -0px; margin-right: -0px;" frameborder="0"></iframe></div>
</div>
</center>

Kết quả: