Cách chèn video Youtube vào Blogger
Trong bài hướng dẫn trước, tôi đã chia sẻ với các bạn cách chèn nhanh một video trên Youtube vào Website/Blogspot. Nêu trong bài này tôi xin không nhắc lại. Các bạn có thể tham khảo bài viết trước qua link bên dưới.
Thông thường khi chèn một video vào, sẽ có một thẻ iframe bao quanh video. Thẻ iframe chứa các thuộc tính quy định và ràng buộc video theo một chuẩn mực nào đó. Trong bài viết này chúng ta sẽ đi sâu vào tìm hiểu các thuộc tính của thẻ iframe, để có thể chèn một video theo ý muốn nhé.
Tùy chỉnh thông số video Youtube trên Website/Blogger
1. Thuộc tính động rộng và chiều cao Width và Height
Đây là hai thuộc tính quan trọng, quy định chiều rộng và chiều cao của video. Chúng ta cùng tham khảo qua đoạn code chèn video sau:
<iframe Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen src="https://www.youtube.com/embed/[Video ID]" ></iframe>
Mặc định khi sao chép đoạn code chia sẻ trên Youtube, thì thống số Width và Height sẽ là 560px và 315px. Tùy vào khung chứa mà các bạn có thể thay đổi 2 thông số này cho phù hợp.
Ví dụ như chèn trên mỗi bài viết thì tôi chọn thông số là 720px, 460px, và video tôi chèn được hiển thị như bên dưới.
Nếu chèn vào một Widget thì tôi chọn thông số 300px, 180px như hình.
Các thông số này không cố định, mà phụ thuộc vào giao diện của trang web. Để có thể biết khung cần chèn video kích thước bao nhiêu thì trên khung trình duyệt, các bạn nhấn phím F12:
Để hiển thị video tại vị trí 5 như hình trên, thì trước tiên các bạn thiết lập:
- Vị trí 1 chọn Responsive
- Vị trí 2 nhập 1280
- Vị trí 3 chọn 75% hoặc 50%
Tiếp theo các bạn nhấp chuột vào vị trí 4, biểu tượng tại vị trí 4 sẽ nổi lên. Bạn di chuyển con trỏ chuột về vị trí 5 (nhớ đừng nhấp chuột). Dịch chuyển con trỏ chuột xung quanh khu vực 5, sao cho xuất hiện viền cam chiếm 100% độ rộng của khung như hình trên.
Tại vị trí 6, bạn thấy có xuất hiện thông số 300.27 x 101 tương ứng với width và height. Có nghĩa là độ rộng cho biết của khung là 300px. Dựa vào thông số này bạn chỉnh thuộc tính width trên iframe để chèn video vào, thông số heigth thì các bạn tự thay đổi sao cho khung video ưng ý nhé.
2. Thuộc tính có liên quan - Related
Các bạn thường xem video Youtube chắc chắn sẽ thấy khi xem hết video, Youtube sẽ đề xuất các video cho bạn xem kế tiếp dựa vào các từ khóa hoặc nội dung có liên quan. Điều này sẽ làm bạn cảm thấy khó chịu, thậm chí bực mình khi đối thủ cạnh tranh được đề xuất ngay trên trang web của mình.Để loại bỏ các đối thủ cạnh tranh được đề xuất ở cuối video, bạn thêm thông số Related (?rel=0) vào đoạn code:
<iframe src="https://www.youtube.com/embed/[Video ID]?rel=0" Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
3. Thuộc tính tự động phát - Autoplay
- Khuyến cáo: không nên dùng, vì sẽ làm phiền người truy cập
Khi người dùng truy cập vào bài viết, video trên bài viết sẽ được tự động phát. Để làm được điều này, các bạn thêm thuộc tính Autoplay (?autoplay=1) vào đoạn code như sau:
<iframe src="https://www.youtube.com/embed/[Video ID]?autoplay=1" Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
4. Thuộc tính ShowInfo trên thanh Title
Thuộc tính này để bật/tắt tiêu đề của video. Để tắt tiêu đề trên thanh Title, các bạn thêm thuộc tính showinfo (?showinfo=0) vào code như sau:
<iframe src="https://www.youtube.com/embed/[Video ID]?showinfo=0" Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
5. Thuộc tính phát lặp lại - Loop
Bạn muốn video hay playlist tự động phát lại, chỉ cần chèn thuộc tính Loop (?loop=1) vào như đoạn code như sau:
<iframe src="https://www.youtube.com/embed/[Video ID]?loop=1" Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
6. Thuộc tính chú thích trong Video - Annotations
Góc trên bên phải của khung video có icon chữ i. Để tắt icon này bạn thêm thuộc tính iv_load_policy vào đoạn code như sau:
<iframe src="https://www.youtube.com/embed/[Video ID]?iv_load_policy=3" Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
7. Thuộc tính điều khiển Video - Controls
Thuộc tính này cho phép hiển thị hoặc không hiển thị thanh điều khiển của video. Mặc định mỗi video khi chèn vào thì thuộc tính controls=1, để tắt thuộc tính này bạn thêm đoạn code như sau:
<iframe src="https://www.youtube.com/embed/[Video ID]?controls=0" Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
8. Thuộc tính đáp ứng với bàn phím - Disablekb
Mặc định thuộc tính này có giá trị là 0, nhận các lệnh từ bàn phím như: Play/Pause, Volume Up/Volume Down, Mute, ... Để cài đặt cho video không nhận các phản hồi từ bàn phím thì các bạn đặt giá trị 1 cho thuộc tính này:
<iframe src="https://www.youtube.com/embed/[Video ID]?disablekb=1" Width="560" Height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe>
9. Thuộc tính bắt đầu và kết thúc - start end
Start dùng để chọn thời gian bắt đầu phát video, end giới hạn thời gian kết thúc phát của video. :
Tags:
Blogger