Chèn Video Trên YouTube Vào Trang Web | Học JavaScript

NỘI DUNG BÀI VIẾT

Toggle

• Giới thiệu
• Những khó khăn gặp phải với định dạng Video?
• ID của một video YouTube là gì?
• Cách chèn khung YouTube vào trang web
• Thiết lập kích thước cho khung YouTube
• Các tham số của khung YouTube
• Kết luận

Giới thiệu

Chèn video trên YouTube vào trang web hay blog giúp người xem có thêm tư liệu nội dung để tham khảo và cũng tăng lượng người truy cập vào trang web.

Thao tác chèn video YouTube rất đơn giản, bạn có thể chèn video của mình hay từ bất kỳ kênh YouTube nào khác mà không cần đăng nhập tài khoản Google.

Ngoài việc chèn video YouTube riêng lẻ, chúng ta có thể chèn playlist YouTube vào trang web hay blog để người dùng tiện theo dõi, nhất là khi xem video bài giảng theo các chủ đề chẳng hạn. Bài viết dưới đây sẽ hướng dẫn bạn đọc cách chèn video, playlist YouTube vào web, blog,…

Những khó khăn gặp phải với định dạng Video?

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 rất nhiều 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.

ID của một video YouTube là gì?

Trên YouTube, mỗi video sẽ có một ID tương ứng (ID này là duy nhất, tức là không có trường hợp các video trùng ID).

Trang web quyết định video nào sẽ được phát dựa vào ID này.

Ví dụ, khi bạn lên xem một video trên YouTube có địa chỉ là https://www.youtube.com/watch?v=LYiCw361uFU thì phần chữ được tô nền màu đỏ chính là ID của video.

Cách chèn khung YouTube vào trang web

Để chèn khung video trên YouTube vào trang web, ta sử dụng thẻ <iframe>. Nếu chưa hiểu rõ về thẻ <iframe>, truy cập Thẻ iframe trong HTML.

Cú pháp:

<iframe src="https://youtube.com/embed/ID"></iframe>Code language: HTML, XML (xml)

Ví dụ:

<iframe src="https://youtube.com/embed/pDOD7gAGM6g"></iframe>Code language: HTML, XML (xml)

Để gỡ bỏ đường viền cho khung YouTube, ta thêm thuộc tính frameborder với giá trị 0 vào thẻ <iframe>.

<iframe src="https://youtube.com/embed/pDOD7gAGM6g" frameborder="0"></iframe>Code language: HTML, XML (xml)

Để cho phép phóng to hay thu nhỏ màn hình, ta thêm thuộc tính allowfullscreen vào thẻ <iframe>.

<iframe src="https://youtube.com/embed/pDOD7gAGM6g" allowfullscreen></iframe>Code language: HTML, XML (xml)

Thiết lập kích thước cho khung YouTube

Thuộc tính width dùng để thiết lập chiều rộng cho khung YouTube.

Thuộc tính height dùng để thiết lập chiều cao cho khung YouTube.

Giá trị của thuộc tính width và height có thể xác định theo đơn vị:

• px (Pixel)
• % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: Phần tử chứa khung YouTube có chiều rộng 800px, ta thiết lập chiều rộng cho khung YouTube là 50% thì khi hiển thị ra màn hình, khung YouTube sẽ có chiều rộng là 400px)

<iframe src="https://youtube.com/embed/pDOD7gAGM6g" frameborder="0" width="300px" height="500px"></iframe>Code language: HTML, XML (xml)

Các tham số của khung YouTube

Tham số được dùng để cung cấp thêm thông tin, chức năng cho khung YouTube (Ví dụ: tự động phát video, không hiển thị trình điều khiển, chơi video theo dạng danh sách,….)

Để thêm tham số, ta sử dụng cú pháp:

<iframe src="https://youtube.com/embed/ID?parameter=value"></iframe>Code language: HTML, XML (xml)

Dưới đây là danh sách các tham số của khung YouTube:

Tham số	Giá trị và ý nghĩa
autoplay	giá trị 0 (mặc định): video không tự động phátgiá trị 1: video sẽ tự động được phát khi trang web load xong.
controls	giá trị 0: không hiển thị trình điều khiển video (như nút âm thanh, phóng to màn hình,….)giá trị 1 (mặc định): có hiển thị trình điều khiển video
showinfo	giá trị 0: không hiển thị tiêu đề video và tác vụ của trình phátgiá trị 1 (mặc định): hiển thị tiêu đề video và tác vụ của trình phát
rel	giá trị 0: không hiển thị các video được đề xuất khi video kết thúcgiá trị 1 (mặc định): hiển thị các video được đề xuất khi video kết thúc
playlist	Chơi video theo dạng danh sách (hết video này đến video khác)

Lưu ý: Các tham số mặc định là thông cần thiết. Nếu bạn muốn thiết lập tham số cho khung YouTube với giá trị là giá trị mặc định, thì bạn không cần phải thêm tham số đó.

Để thiết lập nhiều tham số cho cùng một khung YouTube, bạn thêm dấu & vào giữa các tham số.

<iframe src="https://youtube.com/embed/pDOD7gAGM6g?showinfo=0&autoplay=1&controls=0"></iframe>Code language: HTML, XML (xml)

Kết luận

Qua đây là một số chia sẻ về chèn video trên YouTube vào trang web, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Chia sẻ

Bài viết liên quan