Nhúng video YouTube vào trang web HTML

Bạn có thể nhúng video từ YouTube vào trang web của mình một cách dễ dàng. Chỉ cần lấy mã nhúng (embed code) của video.

Lấy ID video YouTube

Bước 1: Truy cập video trên YouTube, nhấp chuột phải vào video và chọn "Stats for nerds" (Thống kê cho người đam mê).

Một hộp thoại sẽ hiển thị thông tin chi tiết về video, trong đó có Video ID.

Nhúng video YouTube vào trang web HTML

Trong ví dụ này, Video ID là: F6m0ghjadlw. Chúng ta sẽ sử dụng ID này để nhúng video.

Nhúng video bằng thẻ <iframe> (Khuyên dùng)

Cách hiện đại và được khuyến nghị nhất là sử dụng thẻ <iframe>:

<!DOCTYPE html>
<html>
<head>
    <title>Nhúng Video YouTube</title>
</head>
<body>
    <h1>Cài đặt WordPress</h1>
    <p>Video dưới đây minh họa cách cài đặt WordPress trên localhost sử dụng XAMPP:</p>
    <iframe width="600" height="350" src="https://www.youtube.com/embed/F6m0ghjadlw" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Kết quả

Video YouTube sẽ hiển thị trực tiếp trên trang web:

Nhúng video YouTube vào trang web HTML

Cách thay thế: Sử dụng thẻ <embed> (Cũ)

Bạn cũng có thể dùng thẻ <embed>, tuy nhiên cách này không được khuyến nghị cho các trình duyệt hiện đại:

<!DOCTYPE html>
<html>
<head>
    <title>Nhúng Video YouTube</title>
</head>
<body>
    <h1>Cài đặt WordPress</h1>
    <p>Video minh họa cài đặt WordPress (sử dụng thẻ embed):</p>
    <embed width="600" height="350" src="https://www.youtube.com/embed/F6m0ghjadlw">
</body>
</html>

Kết quả

Video cũng hiển thị được nhưng thiếu các tính năng điều khiển đầy đủ:

Nhúng video YouTube vào trang web HTML

Lưu ý quan trọng:

Luôn dùng https://www.youtube.com/embed/VIDEO_ID cho thuộc tính src.
Thêm allowfullscreen để cho phép xem toàn màn hình.
Có thể tùy chỉnh kích thước qua width và height hoặc CSS.
Tham số thêm như ?autoplay=1&mute=1 có thể thêm vào URL src.