Nguyễn Đức PhúBài viết giới thiệu về:
- Thẻ
<iframe>trong HTML. - Nhúng video clip từ Youtube vào web bằng thẻ
<iframe>.
Thẻ iframe trong HTML
<iframe> là 1 thẻ chuẩn HTML giúp nhúng 1 trang web vào 1 trang web.
Ví dụ:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe
src="https://training.stdio.vn"
width="90%"
height="500"
frameborder="1"
></iframe>
</body>
</html>
Các thuộc tính của <iframe> bao gồm:
src: đường dẫn đến trang web cần nhúng.width: độ rộng iframe (px, %).height: độ cao iframe (px, %).frameborder: độ rộng của viền.
<iframe> là 1 thẻ chuẩn HTML giúp nhúng 1 trang web vào 1 trang web.
Hiện thực
Lấy mã nhúng của clip trên Youtube
- Đến trang Youtube chứa đoạn clip cần nhúng, ví dụ: https://www.youtube.com/watch?v=jNQXAC9IVRw
- Lấy tham số ở cuối liên kết: jNQXAC9IVRw
- Thay tham số vào mã iframe như code mẫu bên dưới.
<iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Sao chép mã trên vào vị trí cần nhúng clip:
<!DOCTYPE html> <html> <body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body> </html>
Tuỳ chỉnh kích thước cho clip
Khi nhúng 1 clip vào trang web mới, cần điều chỉnh lại kích thước width và height.
Ví dụ:
<iframe width="1280" height="720" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Thuộc tính allowfullscreen
Sự tồn tại của allowfullscreen tương ứng với sự tồn tại của nút trình chiếu toàn màn hình trên clip.
