HTML4 20 – Cách nhúng khung video Youtube vào website trong HTML

0
488
Trong bài 20 này, mình sẽ hướng dẫn cho các bạn những ký năng cần thiết nhất để tùy biến 1 cách hiệu quả việc nhúng video Youtube vào website sử dụng thẻ <iframe> trong HTML đã học ở bài trước.
Cách nhúng khung video Youtube vào website trong HTML
Các bạn nên up video của mình lên youtube sau đó chèn vào bài viết thay vì up thẳng video lên host. Đơn giản là video chạy trên youtube thường có tốc độ load nhanh hơn so với host của bạn, bạn tiết kiệm được băng thông và nếu video của bạn công khai trên youtube thì bạn đương nhiên hưởng thêm traffic từ youtube vì những video trên youtube được index rất nhanh và dễ dàng đứng top.

Ẩn link trỏ đến Youtube trong video nhúng vào website

Khi chèn video vào website hay blog, thay vì chèn Url của video 1 cách đơn giản hoặc copy mã nhúng tại mục chia sẻ của Youtube để chèn vào bài đăng thì bạn có thể dùng đoạn code sau để chèn video từ youtube. Logo youtube và link trỏ đến youtube sẽ được ẩn hoàn toàn cho dù người dùng có click chuột để tìm Url. Đơn giản bạn chỉ cần thay đổi xxxxxx thành ID video mà bạn muốn chèn, ngoài ra có 1 số tùy chỉnh có thể bạn muốn thay đổi như sau:
  • autoplay=gia-tri. Đặt giá trị = 0 – không tự động chạy video, giá trị = 1 –  bật autoplay.
  • vq=hd720. Chất lượng video mà bạn muốn để mặc định, có thể 360, 480,…
  • rel=0. Tắt video liên quan sau khi chạy hết video, để giá trị =1 nếu bật video liên quan
  • nologo=1. Bật chế độ không hiển thị logo, để = 0 nếu muốn hiển thị logo
  • color=white. Màu đỏ nếu là mặc định của youtube
  • Ngoài ra bạn còn có thể tùy chình chiểu rộng, chiều cao của video,…
Ưu điểm: Sử dụng cách này bạn đương nhiên biến video trên youtube thành của riêng mình mà những độc giả bình thường khó tìm đến video trên youtube để xem, giữ chân được độc giả ở lại lâu trên blog cũng như video có tốc độ load nhanh, tiết kiệm băng thông,… Nhược điểm: Youtube hay đúng hơn là Google không cho phép bạn giấu hoàn toàn link trỏ ngược về youtube khi chèn video vào website và nếu trang web của bạn là trang chỉ gồm có video thì hãy dè chừng nếu Google sờ đến rằng bạn vi phạm bản quyền. Ví dụ:

Lấy link iframe do youtube hỗ trợ

Để đỡ phải đi copy những link iframe như trên, tôi sẽ hướng dẫn các bạn 1 cách lấy link trực tiếp trên youtube. Bước 1: Vào YOUTUBE (www.youtube.com), tìm tới video mà bạn muốn đưa vào website. Ví dụ, bạn sẽ đưa video clip “Xin Phép (được) Cô Đơn | Vũ – Những Bài Hát Hay Nhất Của Vũ” vào website. Trang Youtube sẽ tương tự như sau:
Cách nhúng khung video Youtube vào website trong HTML - 02
Bước 2: Bấm vào nút “Share” bên dưới hình video. Bạn sẽ thấy hiện một số ô và nút, như sau:
Cách nhúng khung video Youtube vào website trong HTML - 03
Bước 3: Bấm nút “Nhúng”. Bạn sẽ thấy hiện ra một đoạn code trong ô bên dưới. Đây là đoạn code bạn sẽ đưa vào copy trong website của bạn.
Cách nhúng khung video Youtube vào website trong HTML - 04
Tuy nhiên, bạn nên tắt mục [_] Show suggested videos when the video finishes hayHiển thị các video đề xuất khi video này kết thúc để không cho hiện ra các video liên quan khi video này chiếu xong. Bạn có thể chọn kích thước video khác với kích thước mặc định bằng cách bấm chọn một kích thước bên dưới. Bạn cũng có thể điền một kích thước khác với những gì sẵn có vào trong 2 thuộc tính widthheight. Ta thu được video sau khi nhúng như sau:

Kết luận

Như vậy tôi đã hướng dẫn cho các bạn xong những cách thức có thể chèn được Video Youtube vào trong website thông qua cặp thẻ <iframe> rồi. Hẹn các bạn trong bài học tiếp theo. Chúc các bạn học tập tốt!  

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây