Video YouTube HTML

Cách dễ nhất để phát video trong HTML là sử dụng YouTube.



Đấu tranh với các định dạng video?

Trước đó trong hướng dẫn này, bạn đã thấy rằng bạn có thể phải chuyển đổi video của mình sang các định dạng khác nhau để làm cho chúng phát trong tất cả các trình duyệt.
Chuyển đổi video sang các định dạng khác nhau có thể khó khăn và tốn thời gian.
Một giải pháp dễ dàng hơn là để YouTube phát video trong trang web của bạn.

Id video YouTube

YouTube sẽ hiển thị một id (như tgbNymZ7vqY), khi bạn lưu (hoặc phát) video.
Bạn có thể sử dụng id này và tham khảo video của mình bằng mã HTML.

Phát video YouTube bằng HTML

Để phát video của bạn trên một trang web, hãy làm như sau:
  • Tải video lên YouTube
  • Ghi lại id video
  • Xác định phần tử <iframe> trong trang web của bạn
  • Để thuộc tính src trỏ đến URL video
  • Sử dụng các thuộc tính chiều rộng và chiều cao để chỉ định kích thước của trình phát
  • Thêm bất kỳ tham số nào khác vào URL (xem bên dưới)
Ví dụ - Sử dụng iFrame (được khuyến nghị)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Tự động phát YouTube

Bạn có thể để video của mình bắt đầu phát tự động khi người dùng truy cập trang đó bằng cách thêm một tham số đơn giản vào URL YouTube của bạn.
Lưu ý: Hãy cân nhắc cẩn thận khi quyết định tự động phát video của bạn. Tự động bắt đầu một video có thể gây khó chịu cho khách truy cập của bạn và cuối cùng gây ra nhiều tác hại hơn là tốt.
Giá trị 0 (mặc định): Video sẽ không tự động phát khi trình phát tải.
Giá trị 1: Video sẽ tự động phát khi trình phát tải.
YouTube - Tự động phát
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>

Danh sách phát YouTube
Danh sách video được phân tách bằng dấu phẩy (ngoài URL gốc).

Vòng lặp YouTube
Giá trị 0 (mặc định): Video sẽ chỉ phát một lần.

Giá trị 1: Video sẽ lặp (mãi mãi).

YouTube - Vòng lặp
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Điều khiển YouTube
Giá trị 0: Điều khiển trình phát không hiển thị.

Giá trị 1 (mặc định): Hiển thị điều khiển trình phát.

YouTube - Điều khiển
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

ouTube - Sử dụng <object> hoặc <embed>
Lưu ý: YouTube <object>và <embed>không được dùng nữa từ tháng 1 năm 2015. Bạn nên di chuyển video của mình để sử dụng <iframe>thay thế.

Ví dụ - Sử dụng <object> (không dùng nữa)
<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>

Ví dụ - Sử dụng <embed> (không dùng nữa)
<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">