Web Cơ Bản

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

Thật đơn giản để chèn một khung video trên YouTube vào trang web.

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=Lt-U_t2pUHI thì phần chữ được tô nền màu vàng 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> theo cú pháp sau:

<iframe src="https://youtube.com/embed/ID"></iframe>
Ví dụ:

<iframe src="https://youtube.com/embed/Lt-U_t2pUHI"></iframe>
Xem ví dụ

Để 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>

Ví dụ:

<iframe src="https://youtube.com/embed/Lt-U_t2pUHI" frameborder="0"></iframe>
Xem ví dụ

Để 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>

Ví dụ:

<iframe src="https://youtube.com/embed/Lt-U_t2pUHI" allowfullscreen></iframe>

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)
Ví dụ:

<iframe src="https://youtube.com/embed/Lt-U_t2pUHI" frameborder="0" width="300px" height="500px"></iframe>
Xem ví dụ

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>

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

Tham số Giá trị và ý nghĩa Xem ví dụ
autoplay
  • giá trị 0 (mặc định): video không tự động phát
  • giá trị 1: video sẽ tự động được phát khi trang web load xong.
Xem ví dụ
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
Xem ví dụ
showinfo
  • giá trị 0: không hiển thị tiêu đề video và tác vụ của trình phát
  • giá trị 1 (mặc định): hiển thị tiêu đề video và tác vụ của trình phát
Xem ví dụ
rel
  • giá trị 0: không hiển thị các video được đề xuất khi video kết thúc
  • giá trị 1 (mặc định): hiển thị các video được đề xuất khi video kết thúc
Xem ví dụ
playlist Chơi video theo dạng danh sách (hết video này đến video khác), cú pháp:
<frame src="https://youtube.com/embed/ID1?playlist=ID2,ID3,ID4,....,IDn"></iframe>
Xem ví dụ

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

Ví dụ:

<iframe src="https://youtube.com/embed/Lt-U_t2pUHI?showinfo=0&autoplay=1&controls=0"></iframe>
Xem ví dụ