Header ads

Thiet ke cong trinh dep

Một vài lưu ý khi chèn video từ youtube lên web/ blogger

Việc chèn một video vào web hay blogger chắc không khó khăn gì đối với các bạn. Bởi ngay trên nền tảng của youtube đã tích hợp công cụ embed rất dễ dàng và thuận tiện rồi.


Nhúng một video lên blog g
Nhúng một video lên blog giúp cho blog sinh động và lôi cuốn

1. Chèn video mặc định

Để embed video, các bạn chỉ việc vào công cụ share của youtub, sau đó chọn embed và chép hết đoạn code để chèn lên website của các bạn thôi

Code của một đoạn embed video youtub có dạng như sau

<iframe width="640" height="360" src="//www.youtube.com/embed/9DWqSXJ6zDg" frameborder="0" allowfullscreen></iframe>

Các bạn có thể căn chỉnh một chút cho đẹp như chiều cao, chiều rộng rồi chèn thôi. Riêng mình thường để width="100%"  giúp cho video luôn luôn căn chỉnh được chiều rộng của bài đăng và có sự response chuẩn trên các thiết bị khác nhau


Cách nhúng một video cơ bản trên youtube
Cách nhúng một video cơ bản trên youtube

Chèn code ở khung soạn thảo html
Chèn code ở khung soạn thảo html

2. Code nâng cao


Tuy nhiên ngoài phần code mặc định như nêu trên, các bạn cũng có thể sư dụng thêm một đoạn code tùy chỉnh nâng cao giúp cho phần cài đặt hiển thị video sinh động hơn. Mình sẽ sử dụng đoạn code như bên dưới


<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/9DWqSXJ6zDg?start=10&rel=0&autoplay=1&loop=1&playlist=9DWqSXJ6zDg" width="640"></iframe>



Giải thích các tham số:

- start=10:  bỏ qua 10 giây đầu tiên của Video. Nếu muốn bỏ qua nhiều/ít hơn thì chỉ cần thế số 10 thành số giây bạn muốn.
- &rel=0: Không xuất hiện các Video khác khi kết thúc xem Video hiện tại
- &autoplay=1: Tự động chạy Video
- &loop=1&amp;playlist=Mã Video: Tự  động phát lại (replay) sau khi chạy xong

Ngoài ra mình còn sử dụng một đoạn code nâng cao khác nhưng lại khá phù hợp với mình trông đó có thể ẩn được link out trỏ ra video gốc trên youtube và có thể xem ở chế độ mở rộng full- screen được. Tuy nhiên có một nhược điểm nhỏ là ở phần cuối video lại xuất hiện một danh sách các video tham khảo. Mình nghĩ điều này cũng không có gì to tát hết

<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="415" rel="0&amp;autoplay=1&amp;loop=1" src="https://www.youtube.com/embed/nHAwxMn5UR0?modestbranding=1" width="100%"></iframe>

Danh sách các video tham khảo của youtube
Danh sách các video tham khảo khi kết thúc video



Góc Bình Luận

0 Comments