Lite-youtube-embed – Cải thiện tốc độ load video youtube

Home / Lite-youtube-embed – Cải thiện tốc độ load video youtube
Web các bạn hay bị giảm điểm performance hoặc tăng tốc độ load web khi chèn link video youtube quá nhiều? Không sao hôm nay mình giới thiệu các bạn bộ thư viện lite-youtube-embed hỗ trợ giúp load  video youtube nhanh 224X lần số với cách thông thường. 

 

1. So sánh tốc độ load bình thường và tốc độ load khi dùng thư viện

webexp24h-lite-youtube-embeed

2. Hướng dẫn sử dụng thư viện lite-youtube-embed

Để sử dụng thư viện các bạn nên:

  • Chèn link css vào head khung html
  • Chèn link js vào head khung html
  • Sử dụng các thẻ tag lite-youtube để markup và chèn link youtube vào thẻ

<!-- Include the stylesheet, this could be direct from the package or bundled -->
<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />

<!-- Include the custom element script -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22node_modules%2Flite-youtube-embed%2Fsrc%2Flite-yt-embed.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<!-- Use the element. You may define uses before the scripts are parsed and executed-->
<lite-youtube videoid="ogfYd705cRs"></lite-youtube>

<!--Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it-->
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
	


<div class="lty-playbtn"></div>



</lite-youtube>

Giờ làm việc

Thứ hai - Thứ sáu 08h00 - 20h00

Thứ 7 08h00 - 20h00

Chủ nhật 08h00 - 20h00

Liên Hệ

Bài viết trước
Facebook Messenger - Chat Facebook miễn phí trên Win 10
Bài viết tiếp theo
WhatsApp - Ứng dụng nhắn tin an toàn, miễn phí trên máy tính

    Đăng kí nhận thông tin

    Đăng ký ngay để nhận được những thông tin khi có bài viết mới!