Đưa một Video từ YouTube vào trang HTML

Để đưa video mà bạn mong muốn vào một trang web, bạn cần làm những việc sau đây:

Tải video lên YouTube
Lấy ID của video sau khi tải
Xác định phần tử <iframe> trên trang web của bạn
Cho phép các thuộc tính “src” trỏ tới video URL
Sử dụng thuộc tính width, height để quy định kích cỡ hiển thị
Thêm một vài tham số vào địa chỉ video nếu cần thiết

Ví dụ – Sử dụng phần tử iFrame


<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

</body>
</html>

YouTube Autoplay

Bạn có thể cho các video phát một cách tự động khi người sử dụng truy cập vào trang web của mình bằng cách thêm một số tham số đơn giản vào địa chỉ URL.

Chú ý: Bạn hãy xem xét cẩn thận khi quyết định để tự động phát video của bạn. Tự động bắt đầu từ một đoạn video có thể làm phiền người sử dụng của bạn và cuối cùng gây hại nhiều hơn lợi.

Value 0 (default): Video sẽ không tự động chạy khi trang được tải.

Value 1: Video sẽ tự động chạy khi trang được tải.

YouTube – Autoplay


<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

</body>
</html>

YouTube Playlist

Sử dụng tính năng này nếu bạn muốn tạo một danh sách video chạy nối tiếp nhau, các video ID phân cách nhau bằng dấu phẩy.

YouTube Loop ( Vòng lặp)

Value 0 (default): Video chỉ chạy một lần.

Value 1: Video được chạy đi chạy lại nhiều lần (mãi mãi).

YouTube – Loop


<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1">
</iframe>

</body>
</html>

YouTube Controls( Thanh điều khiển)

Value 0: Không hiển thị thanh điều khiển.

Value 1 (default): Cho phép hiển thị thanh điều khiển .

YouTube – Controls


<!DOCTYPE html>
<html>
<body><iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0">
</iframe>

</body>
</html>

YouTube – Sử dụng thẻ <object> hoặc <embed>

Chú ý: Từ tháng 01 năm 2015, YouTube chính thức bỏ hình thức nhúng video bằng thẻ <Object> và <Embed>. Bạn nên sử dụng thẻ Iframe.

Ví dụ – Sử dụng thẻ <object> (deprecated)


<!DOCTYPE html>
<html>
<body><object width="420" height="315"
data="http://www.youtube.com/v/XGSy3_Czz8k">
</object>

</body>
</html>

Ví dụ – Sử dụng thẻ <embed>


<!DOCTYPE html>
<html>
<body><embed width="420" height="315"
src="http://www.youtube.com/v/XGSy3_Czz8k">

</body>
</html>