前言介紹
- 這款 WordPress 外掛「Lazy load videos and sticky control」是 2019-07-05 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2024-11-21，距離現在已有 462 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.2 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
- 有 5 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
aishan |
外掛標籤
videos | lazyload | shortcode | sticky video | floating video |
內容簡介
此外掛可提升頁面載入速度，因為它只會在頁面載入時載入 YouTube 影片預覽圖片。並且還提供了一個選項/功能，讓您的影片可以在用戶滾動視窗時粘在視窗的側邊（頂部/底部）。
功能
– 延遲加載影片。不需要擔心複雜的設置。
– 支持在單個頁面上瀏覽多個影片。同時只會播放一個影片。如果您播放其他的影片，本影片會暫停播放。
– 當您滾動視窗並移出影片視窗時，本影片會自動粘在視窗底部/頂部。
– 您也可以添加自己的自定義樣式。
使用方法
– 在文章/頁面（WP 編輯器）上點擊“LLVASC”按鈕，生成 shortcode。這將顯示一個彈出窗口，在其中可以添加 YouTube 影片 ID；「Video ID」是您的 YouTube 影片末尾的唯一字母數字代碼。例如：https://www.youtube.com/watch?v=iXGoAj7IEys，那么 iXGoAj7IEys 就是影片 ID。添加 ID 後，點擊「確定」，然後 shortcode 將添加到您的內容中。
– 將 shortcode 添加到您的頁面/文章/內容類型上：[lazy-load-videos-and-sticky-control id=”Youtube-video-ID”]。因此，在您的內容中，應使用 [lazy-load-videos-and-sticky-control id=”iXGoAj7IEys”]。
– 儲存/更新。
– 預覽您的頁面。如果您想要調整一些樣式，可以從「概述」選項卡中添加您自己/自定義的 CSS。
示範: https://preview-plugin.web.app/lazy-load-videos-and-sticky-control.html
原文外掛簡介
This plugin enhances page load times by loading only the YouTube video preview image initially. Additionally, it offers the option to make your video sticky, positioning it at the top or bottom of the window when the user scrolls away from the video viewport.
Features
Lazy Load Videos: Reduce the amount of time it takes to load your video by loading just the video thumbnail.
Multiple Video Support: You may quickly and simply add more than one video to a page. Videos can only be played one at a time, and when one is playing, the other one instantly pauses.
Sticky Video: Keep videos visible as you navigate by adhering them to the top or bottom of the screen to ensure ongoing playback.
Custom Styling: Adapt your videos’ look to perfectly match the style of your website by using 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 the YouTube video.
In the WordPress editor, click on the LLVASC icon. This will open a popup window.
In the popup, add your YouTube video ID. The video ID is the unique alphanumeric code found at the end of your YouTube video URL. For example, in https://www.youtube.com/watch?v=iXGoAj7IEys, the video ID is iXGoAj7IEys.
After entering the video ID, click “Ok”. This action will generate and insert a shortcode into your content.
Shortcode Format:
The shortcode added to your content will look like this:
[lazy-load-videos-and-sticky-control id=”Youtube-video-ID”]
For example, if your video ID is iXGoAj7IEys, the shortcode will be:
[lazy-load-videos-and-sticky-control id=”iXGoAj7IEys”]
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 the YouTube 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 inspect control, select your video platform and enter your video ID. For example, if your YouTube video URL is https://www.youtube.com/watch?v=iXGoAj7IEys, the video ID is iXGoAj7IEys.
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
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Lazy load videos and sticky control」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.1 | 1.0.2 | 1.0.3 | 2.0.0 | 2.0.1 | 2.0.2 | 3.0.0 | 3.0.1 | trunk |
延伸相關外掛（你可能也想知道）
WP Shortcodes Plugin — Shortcodes Ultimate 》Shortcodes Ultimate 是一個全面的視覺與功能性元素收集，您可以在文章編輯器、文字小工具甚至是範本檔案中使用。使用 Shortcodes Ultimate，您可以輕鬆地建...。
MW WP Form 》MW WP Form 可以使用 shortcode 創建帶有確認畫面的郵件表單。, , 使用 shortcode 創建表單, 可以使用確認頁面。, 頁面可以使用相同的 URL 或個別的 URL 進行...。
Shortcoder — Create Shortcodes for Anything 》Shortcoder 外掛可讓您建立 HTML、JavaScript、CSS 和其他代碼片段的自訂捷徑。現在，這些捷徑可以在文章/頁面中使用，並且該片段將取代其位置。, ✍ 輕鬆建立...。
Widget Shortcode 》這個短碼需要小工具的ID，但不需要猜測，外掛會為你生成代碼。如果你想要覆蓋小工具的標題，你可以使用 "title" 參數：, [widget id=”text-1″...。
Display Posts – Easy lists, grids, navigation, and more 》Display Posts 讓您輕鬆地列出網站上的所有內容。首先在內容編輯器中新增此短碼，以列出最近的文章清單：, [display-posts], , 按類別篩選, 若只想顯示特定類...。
amr shortcode any widget 》使用shortcode將小工具或多個小工具或整個小工具區域（側邊欄）插入到頁面中。, 首先在正常的側邊欄中設置小工具。 檢查它是否正常運作。, 然後將所選小工具...。
Column Shortcodes 》此外掛提供簡單易用的短碼，在您的文章或頁面中輕鬆創建欄位。有時候，您只需要將網頁切成不同的欄位。使用此外掛，您只需選擇一個欄位的短碼，便可將欄位加...。
Shortcode in Menus 》此外掛讓你可以在 WordPress 導覽選單中使用簡碼，以便可以動態生成連結。也可以讓你在導覽選單中添加完整的 HTML 段落。, 使用方法, 查看截圖。, 另外，查看...。
Sidebar Widgets by CodeLights 》❗ 很抱歉，由於 SiteOrigin 的 widgets API 完全更改，CodeLights 不再支援 SiteOrigin Page Builder 的原生使用。解決方案：您仍然可以在純文字編輯器中創...。
Insert Pages 》Insert Pages 可讓您使用 Shortcode API，將任何 WordPress 內容（例如，頁面、文章、自訂文章類型）嵌入其他 WordPress 內容。它還包括一個小工具，可將頁面...。
Advanced iFrame 》看起來您正在尋找一個 WordPress 外掛 - Advanced iFrame Pro。這個外掛可讓您使用 iframe 包含其他網頁到您的網站中，同時具有隱藏和修改元素、自動調整高度...。
Shortcodes by Angie Makes 》Shortcodes by Angie Makes 外掛為您的 WordPress 主題新增一系列易於使用的短碼，這些短碼與 Angie Makes WordPress 主題 完美搭配。, 範例, 請到此查看這些...。
Forget About Shortcode Buttons 》相容於 WordPress 傳統編輯器，Gutenberg 整合即將推出🙂, 歡迎提出功能需求/建議！, 即忘短碼(FASC)按鈕是在所見即所得編輯器中及網站佈景主題中加入 CSS 按...。
The Events Calendar Shortcode & Block 》標籤內容：, , 使用 The Events Calendar Shortcode 和 Block，在需要顯示活動的地方顯示可自定義的活動列表！此外掛程式完全整合了現代部落客 (Modern Tribe...。
Team Members 》這個外掛會為管理員面板增加一個「團隊」區塊，讓您可以輕鬆地在網站上展示您的員工/職員。您可以快速地將成員加入您的團隊，加入他們的照片、職位、個人簡介...。