[WordPress] 外掛分享： Lazy load videos and sticky control

內容簡介

此外掛透過延遲加載視頻來改善頁面加載速度，並在播放開始前僅顯示視頻預覽圖像。支援多種視頻平台，並提供固定視頻功能，讓視頻在用戶滾動時保持可見。

【主要功能】
• 延遲加載視頻，減少初始頁面加載時間
• 支援多個視頻，僅一個視頻同時播放
• 固定視頻，滾動時保持視頻可見
• 支援YouTube、Vimeo、Wistia等多平台
• 自訂樣式，可使用自定義CSS

外掛標籤

開發者團隊

原文外掛簡介

This plugin improves page load times by lazy loading videos and displaying only the video preview image until playback begins. It now supports YouTube, Vimeo, Wistia, Dailymotion, JW Player, and self-hosted HTML5 videos, with built-in sticky video functionality that keeps videos visible at the top or bottom of the screen when users scroll away from the video viewport.
Features

Lazy Load Videos: Reduce initial page load by showing only video thumbnail preview image first.
Multiple Video Support: Add more than one video to a page. Only one video plays at a time, and the other video pauses automatically.
Sticky Video: Keep videos visible as you scroll by pinning them to the top or bottom of the screen.
Multi-Platform Support: Use YouTube, Vimeo, Wistia, Dailymotion, JW Player, or self-hosted HTML5 videos.
Custom Styling: Adapt the video presentation with your own CSS.

Usage
Method 1: Using the Classic Editor (WP Editor)

Generate Shortcode in WP Editor:

Open the post/page where you want to add your video.
In the WordPress editor, click on the LLVASC icon. This will open a popup window.
In the popup, add your video ID. For YouTube, Vimeo, Wistia, Dailymotion, and JW Player, use only the video ID, not the full URL.
After entering the video ID, click “Ok”. This generates and inserts a shortcode into your content.

Shortcode Format:

The shortcode added to your content will look like this:
[lazy-load-videos-and-sticky-control type=”youtube” id=”iXGoAj7IEys”]
Example shortcodes:
[lazy-load-videos-and-sticky-control type=”vimeo” id=”76979871″]
[lazy-load-videos-and-sticky-control type=”wistia” id=”26sk4lmiix”]
[lazy-load-videos-and-sticky-control type=”dailymotion” id=”x75iqs7″]
[lazy-load-videos-and-sticky-control type=”jwplayer” id=”hWF9vG66″]
[lazy-load-videos-and-sticky-control type=”html5″ url=”YOUR_VIDEO_URL”]

Save/Update:

Save or update your post/page to apply the changes.

Preview and Customize:

Preview your page to see the embedded video.
If you need to adjust the styling, you can add custom CSS in the General tab of the plugin settings.

Method 2: Using Gutenberg Block

Add a Block:

Open the post/page where you want to add your video using the Gutenberg editor.
Click on the “+” icon to add a new block.

Select the LLVASC Block:

Search for the “LLVASC” block in the block library.
Add this block to your content.

Enter YouTube Video ID:

In the LLVASC block settings, select your video platform and enter the matching video ID. For HTML5, use the media picker to choose the video file.

Save/Update:

Save or update your post/page to apply the changes.

Preview and Customize:

Preview your page to see the embedded video.
Customize the block settings as needed to adjust the appearance and functionality.

Demo Preview
Demo