[HTML/HTML5] Phần 46: Nhúng video YouTube vào trang web

Cách tiện lợi nhất để hiển thị video trên HTML là nhúng video của YouTube.

Vấn đề định dạng video

Trong các bài trước, bạn có thể thấy độ tương thích trình duyệt với các video không hoàn toàn hoàn hảo. Mỗi trình duyệt thích hợp khác nhau với các định dạng video. Vì vậy, để một định dạng video hiển thị trên tất cả trình duyệt bạn phải kiểm tra video đó có chứa định dạng video phổ biến được hỗ trợ hay không. Nếu không may, một trình duyệt nào đó không hỗ trợ định dạng video, bạn phải tốn công chuyển đổi video sang định dạng được hỗ trợ và tất nhiên công việc này tốn thời gian và công sức. Cách khỏe nhất là bạn phó mặc cho YouTube về định dạng và hiển thị video khi upload video lên trang này, sau đó bạn chỉ cần nhúng vào trang web của mình là xong. Hơn nữa, đây cũng là cách bạn tiết kiệm được dung lượng và băng thông cho website, cũng như có thể mở kênh Adsense YouTube.

Id video của YouTube

Mỗi video YouTube đều có một id khi bạn lưu hay phát video đó. Hãy để ý đường dẫn một video bất kỳ ở YouTube, bạn sẽ tìm được id này. Chẳng hạn, với đường dẫn https://www.youtube.com/watch?v=QCcDKAbi6T0 thì chỉ số id là QCcDKAbi6T0.

Phát một video YouTube trong HTML

Để phát một videot trên web, bạn hãy làm các bước sau:

• Tải video lên YouTube
• Lưu ý chỉ số id của video
• Định nghĩa phần tử iframe trong trang web
• Sử dụng thuộc tính src để trỏ tới ULR của video
• Dùng thuộc tính width và height để định nghĩa chiều rộng và chiều cao của video
• Thêm các tham số khác vào URL để định nghĩa các điều khiển cho video

Ví dụ dùng phần tử iframe để hiển thị video.

<iframe width="400" height="300"
src="https://www.youtube.com/embed/QCcDKAbi6T0">
</iframe>

YouTube Autoplay

Để video bắt đầu tự động chơi khi người dùng viếng thăm trang web, bạn chỉ cần thêm tham số autoplay với giá trị là 1 vào đường dẫn URL. Nếu autoplay=0 hoặc không tồn tại nghĩa là video không tự động phát.

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

YouTube Playlist & YouTube Loop

Để thêm một danh sách các video cần được phát, bạn chỉ cần thêm thuộc tính playlist trong URL. Nếu loop=0 có nghĩa là video chỉ phát 1 lần, ngược lại loop=1 thì video được phát mãi mãi.

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

YouTube Controls

Thuộc tính controls để thêm điều khiển, giá trị 0 thì không hiển thị, giá trị 1 thì sẽ hiển thị.

<iframe width="400" height="300"
src="https://www.youtube.com/embed/QCcDKAbi6T0?controls=1">
</iframe>

Nhúng video YouTube bằng thẻ object và embed

Thẻ object và embed nhúng video YouTube đã bị hủy bỏ từ tháng 01 năm 2015. Vì vậy, bạn phải chuyển sang cách dùng inframe để video YouTube có thể hiển thị được.

<p>Không dùng từ tháng 01 năm 2015</p>

<object width="400" height="300"
data="https://www.youtube.com/embed/QCcDKAbi6T0">
</object>

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

Kết luận

Trong bài bạn đã học cách nhúng video YouTube vào trang web để tránh việc trình duyệt không tương thích với các định dạng video. Mời bạn tiếp tục theo dõi bài tiếp theo.