Tìm hiểu YouTube Videos trong HTML

Cách đơn giản nhất để phát video bằng HTML là sử dụng YouTube.

Khó khăn về các định dạng video

Như các bạn đã biết, cần phải chuyển đổi các video sang các định dạng khác nhau để làm cho chúng chạy trong tất cả các trình duyệt. Việc này có thể khó khăn và mất nhiều thời gian.

Một giải pháp dễ dàng hơn là để cho YouTube phát các video trong trang web của bạn.

Id video trên YouTube

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

Phát video YouTube bằng HTML

Để phát video của bạn trên trang web, hãy thực hiện theo các bước sau:

• Tải lên 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 chỉ ra URL video
• Sử dụng các thuộc tính awidth và height để chỉ định kích thước của trình phát
• Thêm bất kỳ tham số khác vào URL (xem bên ví dụ bên dưới)

Sử dụng iframe (được khuyến nghị):

<iframe awidth=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k”>
</iframe>

Tự động chạy video trên YouTube

Bạn có thể bắt đầu tự động phát video khi người dùng truy cập vào trang đó bằng cách thêm một tham số đơn giản vào URL YouTube.

Lưu ý: 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 một video có thể gây khó chịu cho người truy cập, gây nhiều trải nghiệm không tốt.

Giá trị 0 (mặc định): video sẽ không tự động phát khi người dùng truy cập trang web.

Giá trị 1: video sẽ tự động phát khi người dùng truy cập.

<iframe awidth=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1″>
</iframe>

Danh sách phát video trên YouTube

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

Vòng lặp phát video trên Youtube

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).

<iframe awidth=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1″>
</iframe>

Điều khiển video trên Youtube

Giá trị 0: nút điều khiển không hiển thị.

Giá trị 1 (mặc định): nút điều khiển màn hình hiển thị.

<iframe awidth=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k?controls=0″>
</iframe>

YouTube – sử dụng <object> or <embed>

Lưu ý: YouTube <object> và <embed> đã bị phản đối từ tháng 1 năm 2015. Bạn nên thay thế bằng cách sử dụng <iframe>.

Sử dụng <object> (không dùng nữa):

<object awidth=”420″ height=”315″
data=”https://www.youtube.com/embed/XGSy3_Czz8k”>
</object>

Sử dụng <embed> (không dùng nữa):

<embed awidth=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k”>