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>

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

Để 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/Lt-U_t2pUHI" frameborder="0"></iframe>

Để 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/Lt-U_t2pUHI" allowfullscreen></iframe>

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

Thuộc tính awidth 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 awidth 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/Lt-U_t2pUHI" frameborder="0" awidth="300px" height="500px"></iframe>

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:

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/Lt-U_t2pUHI?showinfo=0&autoplay=1&controls=0"></iframe>