Video YouTube trong HTML

Nếu bạn đang gặp khó khăn với các định dạng video, việc 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à cho phép YouTube phát video trên trang web của bạn. Cách dễ nhất để phát video bằng HTML là sử dụng YouTube.

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 chiếu đến video của mình trong code 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:

  • Upload video lên YouTube
  • Ghi lại ID video
  • Xác định một phần tử <iframe> trong trang web của bạn
  • Để thuộc tính src trỏ đến URL video
  • Sử dụng thuộc tính widthheight để chỉ định kích thước của trình phát
  • Thêm bất kỳ thông số nào khác vào URL (xem bên dưới)

Ví dụ:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Tự động phát trên YouTube + Tắt tiếng

Bạn có thể để video của mình bắt đầu tự động phát khi người dùng truy cập trang bằng cách thêm autoplay=1 vào URL YouTube. Tuy nhiên, việc tự động bắt đầu video sẽ gây khó chịu cho khách truy cập của bạn!

Lưu ý: Trong hầu hết các trường hợp, trình duyệt Chromium không cho phép tự động phát. Tuy nhiên, tính năng tự động phát bị tắt tiếng luôn được cho phép.

Thêm mute=1 sau autoplay=1 để video của bạn bắt đầu tự động phát (nhưng bị tắt tiếng).

Video YouTube tự động phát + Tắt tiếng

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

Danh sách phát trên YouTube

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

Vòng lặp YouTube

Thêm loop=1 để video của bạn lặp lại mãi mãi.

  • Giá trị 0 (mặc định): Video sẽ chỉ phát một lần.
  • Giá trị 1: Video sẽ lặp lại (mãi mãi).

Phát video YouTube lặp đi lặp lại

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Kiểm soát video YouTube

Thêm controls=0 để không hiển thị chức năng điều khiển trong trình phát video.

  • Giá trị 0: Các chức năng điều khiển trình phát không hiển thị.
  • Giá trị 1 (mặc định): Các chức năng điều khiển trình phát hiển thị.

Video YouTube hiển thị các chức năng điều khiển

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Thứ Ba, 26/04/2022 14:18
4,34 👨 291
0 Bình luận
Sắp xếp theo