Tùy chỉnh Youtube Embed Player

Hướng dẫn này sẽ giúp bạn làm thế nào để tùy chỉnh mã nhúng Youtube bằng cách sử dụng các thông số tùy chỉnh của Youtube. Ngày nay hầu hết các quản trị web thường sử dụng thẻ <iframe> để hiển thị video YouTube, điều này nhằm giúp cải thiện kinh nghiệm phát triển web của bạn. Bạn có thể ngừng hiển thị video có liên quan bằng cách sử dụng tham số rel  hoặc loại bỏ các biểu tượng YouTube trên trình phát nhạc bằng cách sử dụng tham số modestbranding, hy vọng điều này sẽ làm phong phú thêm kinh nghiệm cho dự án web của bạn.

Xem thêm: Responsive YouTube Embed

Autoplay

 0 ~> giá trị mặt định
 1 ~> Tự động phát video

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?autoplay=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

rel

Sử dụng tham số này, bạn có thể ngừng hiển thị các video có liên quan khi xem kết thúc một video
 0 và 1 (mặt định)

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?rel=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

showinfo

Hiển thị thông tin của video được tải lên
 1 ~> Trước khi đoạn video bắt đầu được phát, nó sẽ hiển thị tiêu đề của video
 0 ~> Sẽ không hiển thị thông tin gì cho đến khi video được phát

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?showinfo=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

controls

 0 ~> Không hiển thị công cụ điều khiển của trình phát YouTube
 1 ~> Hiển thị công cụ điều khiển khi bắt đầu phát (mặt định)

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?controls=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

modestbranding

 1 ~> Ẩn logo YouTube trong trình phát Video
 0 ~> (mặt định)

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?modestbranding=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

color

Thay đổi màu sắc của thanh tiến trình: Màu trắng, Màu đỏ (mặc định).
Nếu thiết lập thanh tiến trình màu trắng thì các tùy chọn modestbranding sẽ bị vô hiệu hóa.

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?color=white" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

cc-load_policy

 1 ~> Tắt chú thích
 0 ~> Giá trị mặt định phụ thuộc vào sở thích của người sử dụng

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?cc_load_policy=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

disablekb

 1 ~> Cho phép người xem video sử dụng phím tắt bàn phím

• Spacebar: Play / Pause
• Mũi tên trái: Bước trở lại 10% trong video hiện tại
• Mũi tên phải: Chuyển trước 10% trong video hiện tại
• Mũi tên lên: Volume Up
• Mũi tên xuống: Volume Down

 0 ~> Không sử dụng (mặt định)

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?disablekb=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

iv_load_policy

 1 ~> Chú thích video hiển thị theo mặt định
 3 ~> Chú thích video bị hạn chế

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?iv_load_policy=3" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

end

Quy định cụ thể thời gian kết thúc đoạn video (VD: đoạn video dài 60 giây, ta có thể quy định cho nó phát 10 giây là kết thúc bằng cách thêm thông số end=10)

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?end=10" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

fs - full screen

 0 ~> Ẩn nút Fullscreen (toàn màn hình)
 1 ~> Mặt định

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?fs=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

loop

 1 ~> Chơi video liên tục
 0 ~> Mặt định

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?loop=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

start

Bắt đầu phát bằng một móc thời gian quy định cụ thể trở về sau

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?start=10" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

Recommended Parameters

Bạn có thể sử dụng nhiều thông số bằng cách sau:

<iframe src="https://www.youtube.com/embed/pzh2HOpf2TA?rel=1&modestbranding=1&showinfo=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

Xem thêm tại: https://developers.google.com/youtube/player_parameters