Categories Lazy load

Giới thiệu plugin WP YouTube Lyte để lazyload video

Mô tả

WP YouTube Lyte cho phép bạn “lazy load / tải lười” các video của bạn bằng cách chèn “Mã nhúng YouTube nhỏ gọn” có khả năng phản hồi nhanh (responsive). Điều này trông giống như khi bạn nhúng YouTube theo cách thông thường, nhưng khác biệt ở đây là nó chỉ gọi các trình bật YouTube nặng nề (“fat”) khi người dùng click vào, vì thế giảm được dung lượng và thời gian kết xuất đáng kể, nhất là khi bạn có nhiều video trên cùng một trang. Plugin có thể được cấu hình để cache ảnh đại diện (thumbnails) của YouTube theo kiểu cục bộ, cải thiện cả hiệu suất và tính riêng tư. Bằng cách sử dụng Lyte để nhúng video từ YouTube, nó giúp bạn không phải gửi yêu cầu tới các máy chủ của YouTube, vì thế có thể tuân thủ GDPR tốt hơn (dù tôi không phải luật sư).

Plugin chọn các liên kết thông thường của YouTube, tiếp quản từ WordPress core oEmbed. Ngoài ra bạn có thể thêm YouTube-link cho video hoặc toàn bộ danh phát với “httpv” thay thế cho “https” hoặc thêm Lyte widget vào sidebar và WP YouTube Lyte sẽ thay thế liên kết bằng đoạn mã tối ưu hóa hiệu suất chính xác. Một số ví dụ:

  • httpv://www.youtube[.]com/watch?v=_SQkWbRublY (nhúng video thông thường)
  • httpv://youtu[.]be/_SQkWbRublY (video nhúng với youtube-shortlink)
  • httpa://www.youtube[.]com/watch?v=_SQkWbRublY (chỉ nhúng audio)
  • httpv://www.youtube[.]com/playlist?list=PLA486E741B25F8E00 (nhúng playlist)
  • httpv://www.youtube[.]com/watch?v=_SQkWbRublY#stepSize=-1 (trình phát video, kích thước nhỏ hơn một bậc so với cấu hình mặc định)
  • httpv://www.youtube[.]com/watch?v=_SQkWbRublY?start=20&showinfo=0 (trình phát video, bắt đầu bật tại giây thứ 20 và không hiển thị tiêu đề)

Các mã ở bên trên, bạn phải bỏ 2 dấu ngoặc vuông ở phần [.], vẫn cần giữ lại dấu chấm.

Hoặc sử dụng shortcode:

[lyte-id=”_SQkWbRublY” /]
[lyte-id=”_SQkWbRublY” audio=”true” /]
[lyte-id=” _SQkWbRublY ″ playlist=”true” /]

Các mã ở bên trên bạn phải bỏ dấu “-” tức là chuyển lyte-id thành lyte id

WP YouTube Lyte được viết ra với mục đích chính là để tối ưu hóa hiệu suất, tốc độ, nhưng nó đã được kiểm tra để có khả năng tương thích tối đa với các trình duyệt (bao gồm cả iPad) trong khi vẫn để ý đến khả năng truy cập. Bắt đầu từ phiên bản 1.2.0 mã nhúng lyte là đáp ứng đầy đủ (co giãn theo kích cỡ màn hình) và có thể tự động nhúng videoObject microdata. Plugin hỗ trợ đầy đủ nhiều ngôn ngữ khác nhau, trong đó có Catalan, Hà Lan, Anh, Pháp, Đức, Hebrew, Romania, Tây Ban Nha và Slovene.

FAQ / Câu hỏi thường gặp

Tại sao WP YouTube Lyte cần truy cập vào YouTube API? API là gì?

API là cách hai phần mềm nói chuyện với nhau để trao đổi thông tin. Trong trường hợp này, WP YouTube Lyte liên hệ với YouTube để hỏi nó về ảnh đại diện, tiêu đề và mô tả cho video bạn đã thêm vào. Ảnh đại diện và tiêu đề được hiển thị trên trang web (trong trình bật của Lyte) trong khi mô tả được đưa vào trong HTML dưới dạng microdata vì lý do tối ưu hóa cho máy tìm kiếm (xem thêm bên dưới).

OK, vậy giờ tôi phải làm thế nào để nhận được khóa API?

  1. Truy cập vào Google Developer Console và đăng nhập tài khoản Google của bạn.
  2. Click vào ‘Create Project’ và: Điền tên Project, điền ID cho Project, cuối cùng nhấn ‘Create’
  3. Trên trang kế tiếp (hoặc khi nó không sang trang kế, bạn click vào tên Project): Cuộn chuột xuống phần YouTube Data API v3 và click vào nó > Click vào ENABLE ở phần trên cùng để bật/cho phép API > Tùy chọn vô hiệu hóa API khác
  4. Trong sidebar bên tay trái: Click vào ‘Credentials’ > Click vào ‘Create Credential’ ở phần đầu > Click vào ‘API key’ > Đặt càng ít hạn chế càng tốt, hầu hết các vấn đề xảy ra là do các cài đặt này gây ra > Click vào ‘Create’
  5. Copy API key của bạn để đưa vào trang cài đặt của WP YouTube Lyte

WP YouTube Lyte sẽ hoạt động chứ nếu tôi không cung cấp khóa API?

Có, trong một số ngoại lệ; WP YouTube Lyte sẽ tiếp tục hoạt động, kết xuất trình bật Lyte, nhưng sẽ không có tiêu đề và microdata (mô tả, thời gian, vân vân) và không có ảnh đại diện trong danh sách bật.

Tôi không muốn dùng API key, làm thế nào tôi có thể thoát khỏi nhắc nhở của plugin liên quan đến “API key”?

Chỉ cần nhập vào “none” trong khu vực API key và Lyte sẽ dừng kêu ca với bạn.

WP YouTube Lyte hỗ trợ microdata như thế nào?

  • Có một scheme microdata được chỉ định cho “videoObject” cái mà WP YouTube Lyte có thể thêm vào trang của bạn, đây là thông tin Google có thể sử dụng để hiển thị ảnh đại diện video bên cạnh kết quả tìm kiếm.
  • Tính năng này là một tùy chọn và bạn có thể vô hiệu hóa nó trong trang tùy chọn.
  • Microdata videoObjet sẽ KHÔNG được thêm vào trong các trường hợp chỉ nhứng audio, playlist (chuỗi video) hoặc widget.
  • Không phải lúc nào Google cũng hiển thị ảnh đại diện, điều này có lẽ phụ thuộc vào mức độ liên quan của video với phần còn lại của trang.

Tôi có thể sử dụng WP YouTube Lyte với liên kết YouTube hoặc iframes thông thường?

Được bạn nhé, bắt đầu từ phiên bản 1.5.0 liên kết YouTube thông thường được tự động chuyển trong mã nhúng Lyte. Bạn cũng sẽ tự động nhận được một (không phải Lyte) hình xem trước của video bên trong màn hình edit bài viết dạng visual. Bắt đầu từ LYTE 1.7.5 iframe YouTube cũng có thể tự động chuyển đổi mà không gặp vấn đề gì.

Tôi có thể làm những gì với API?

Rất nhiều; có một bộ lọc để phân tích cú pháp trước (pre-parse) là the_content, cho mục đích thay đổi cài đặt, thay đổi CSS, thay đổi HTML của LYTE-div,… Có các ví dụ cho tất cả các bộ lọc (và một action) trong lyte_helper.php_example

Các rắc rối với All In One SEO Pack

All in One SEO Pack ở chế độ mặc định tạo ra một đoạn mã vẫn có httpv-links bên trong nó. Để loại bỏ những cái này, bạn sẽ phải sử dụng lyte_helper.php (xem ở trên) và thêm lyte_filter_aioseop_description vào bên trong aioseop-filter.

Mã nhúng LYTE co giãn theo màn hình

  • Độ rộng của video trong bài post và page sẽ thích ứng với chiều rộng của thẻ chứa (thẻ div) trong trang mà bạn hiển thị. Điều này có nghĩa là nếu giao diện của bạn co giãn, WP YouTube Lyte sẽ thực hiện theo.
  • Widget sẽ không co giãn.
  • Nếu chiều rộng div nội dung có giá trị quanh 200 pixel, giao diện người dùng của LYTE sẽ bị cắt xén (YouTube yêu cầu chiều rộng mã nhúng tối thiểu là 200 px)

Video của tôi dường như tải chậm trên thiết bị di động?

Theo mặc định (trừ khi tính năng”cache thumnail locally” được kích hoạt), WP YouTube Lyte sẽ thực sự tải video YouTube thông thường chậm hơn thay vì các video Lyte, vì video Lyte yêu cầu hai click từ người dùng để bật video (một để tải video YouTube và một để bật nó) vì không có hỗ trợ bật tự động (autoplay) trên di động. Nếu bạn muốn, bạn có thể ép WP YouTube Lyte tạo video của Lyte trên di động bằng đoạn mã dưới đây (thêm nó vào functions.php của child theme trong một plugin hỗ trợ riêng hoặc sử dụng plugin code snippets):

add_filter('lyte_do_mobile','lyte_on_mobile',10,0);
function lyte_on_mobile(){
    return true;
}

Có bất kỳ vấn đề nào mà tôi cần phải biết không?

Có cùng video YouTube giống nhau trên một trang có thể là nguyên nhân khiến WP YouTube Lyte bị trục trặc (cũng như YouTube id được dùng như div id trong DOM, và DOM id được cho là duy nhất).

Kết luận

Trong trường hợp bạn muốn tìm hiểu cách sử dụng WP YouTube Lyte, bạn có thể tham khảo link vừa dẫn.

(Dịch từ phần mô tả plugin trên WordPress.Org)

Back to Top