Hiển thị Youtube trong HTML

Cách dễ dàng nhất để chèn một video vào trang HTML là sử dụng YouTube.

Tại sao nên sử dụng Youtube?

Mỗi phiên bản của một trình duyệt hỗ trợ các định dạng video khác nhau, mỗi trình duyệt lại hỗ trợ những định dạng video khác nhau. Điều này dẫn tới sự hỗ trợ định dạng video không đồng nhất giữa các trình duyệt, làm cho bạn rất vất vả khi chèn video vào website.

Trong bài trước, bạn đã biết chúng ta có thể chuyển đổi từ một định dạng video có sẵn sang các định dạng video khác để chúng có thể chạy trên mọi trình duyệt khi đưa vào website. Nhưng việc chuyển đổi định dạng video hoàn toàn không dễ dàng và sẽ tốn không ít thời gian.

Giải pháp đơn giản nhất cho bạn đó là sử dụng Youtube. Bạn chỉ cần upload video lên, Youtube sẽ tự động chuyển đổi định dạng và hiển thị video tương thích trên các trình duyệt. Công việc của bạn chỉ đơn giản là chèn liên kết từ Youtube vào website.

Một thực tế nữa mà bạn phải lưu ý đó là băng thông và dung lượng lưu trữ. Nếu bạn có nhiều video dài, đặc biệt là video có độ phân giải cao nó sẽ chiếm rất nhiều dung lượng lưu trữ cũng như băng thông để đáp ứng nhu cầu xem của người dùng. Lúc này bạn sẽ phải bỏ thêm một số tiền không nhỏ để phục vụ việc lưu trữ và mở rộng băng thông. Trong khi đó, Youtube sẽ xử lý toàn bộ các khâu này cho bạn một cách miễn phí, thậm chí bạn còn có thể kiếm thêm thu nhập từ video của mình. Miễn sao video của bạn không vi phạm bản quyền.

Video Id của YouTube

Khi bạn tải một video lên trên YouTube, bạn sẽ nhận được một ID là các ký tự bao gồm chữ, số, gạch dưới (giống như thế này: buT7c129DKg).

Bạn sẽ cần đến ID này để chèn video từ YouTube vào trang HTML của mình.

Chèn video từ YouTube vào trang HTML

Để hiển thị video từ YouTube trên trang, bạn làm theo các bước sau đây:

• Tải video lên YouTube
• Lấy ID của video sau khi tải
• Sử dụng thẻ <iframe> với thuộc tính src trỏ tới video
• Sử dụng thuộc tính awidth, 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 Iframe để hiển thị video từ YouTube

Demo

Tham số khi hiển thị video từ YouTube

autohide

Giá trị là 0: Thanh điều chỉnh video luôn luôn hiển thị.

Giá trị là 1: Thanh điều chỉnh tự động ẩn khi video chạy.

Giá trị là 2 (mặc định): Nếu video có tỷ lệ độ phân giải 16:9 hoặc 4:3 thì hoạt động giống giá trị là 1, còn lại hoạt động giống giá trị là 0.

autoplay

Giá trị là 0 (mặc định): Video sẽ không tự động chạy khi trang được tải.

Giá trị là 1: Video sẽ tự động chạy khi trang được tải.

controls

Giá trị là 0: Không hiển thị thanh điều chỉnh. Tải khung hiển thị video ngay khi tải trang.

Giá trị là 1 (default): Hiển thị thanh điều chỉnh. Tải khung hiển thị video ngay khi tải trang.

Giá trị là 2: Hiển thị thanh điều chỉnh nhưng chỉ tải khung hiển thị video khi người dùng nhấn vào nút chạy.

loop

Giá trị là 0 (mặc định): Video chỉ chạy một lần.

Giá trị là 1: Video lặp đi lặp lại.

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.