[WordPress] 外掛分享： YouTube Block – A better way to embed YouTube videos, shorts, playlists

前言介紹

  • 這款 WordPress 外掛「YouTube Block – A better way to embed YouTube videos, shorts, playlists」是 2022-11-22 上架。
  • 目前有 4000 個安裝啟用數。
  • 上一次更新是 2025-04-14，距離現在已有 19 天。
  • 外掛最低要求 WordPress 6.5 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
  • 有 13 人給過評分。
  • 論壇上目前有 2 個提問，問題解答率 50%

外掛協作開發者

mr2p |

外掛標籤

block | embed | video | youtube | gutenberg |

內容簡介

預設的 YouTube 嵌入區塊很差。它會拖慢您的網站速度。頁面上的嵌入影片越多，速度就越慢。而這個單一區塊的外掛程式可以解決這個問題。

這個區塊與預設的區塊相比有何優勢:

不須載入整個 iframe，只載入縮圖，從而大大提高網站效能
自動載入影片標題當註解
與預設的 core/embed 有相同的使用者介面，您只需點選一下就可以把影片標題當成區塊註解
可以轉換為/自 core 嵌入區塊。

如果您想知道這個外掛程式能多麼快，請查看此 網頁。那個網頁內有30個嵌入式YouTube影片，但頁面並不會變慢。

如果您覺得這個外掛程式對您有幫助，請撰寫評論並在WordPress.org上評分，幫我們宣傳。非常感謝。

如果您有興趣，請查看我其他的外掛程式:

Content Blocks Builder - 一個在區塊編輯器中直接為您的網站創建區塊、圖案或變異的工具。
Meta Field Block - 一個區塊，可以將meta欄位或ACF欄位作為區塊顯示。它還可以在查詢循環區塊中使用。
Block Enhancements - 一個外掛程式，可以為區塊添加更多有用的功能，如圖標、陰影、轉換、懸停樣式等。
Icon Separator - 一個微小的區塊，就像基礎/分隔符區塊一樣，但可以添加圖標。
SVG Block - 一個區塊，可以輕鬆安全地插入內置SVG圖像。它還提供了3000多個圖標和一些常見的非矩形分隔符。
Counting Number Block - 一個區塊，可以顯示具有計數效果的數字。
Breadcrumb Block - 一個簡單的面包屑區塊，支持JSON-LD結構化數據。

此外掛程式是使用 @wordpress/create-block 開發的。

原文外掛簡介

The default embed block for YouTube videos sucks. It slows down your site. The more videos on the page the more it slow. This single-block plugin fixes that.
Why this block is better than the default one:

Instead of loading the entire iframe, only the video thumbnail is loaded, resulting in significant performance improvements
Ability to play multiple different videos as a custom playlist or input a playlist ID to play the whole playlist
Ability to use a custom image as the video thumbnail
Ability to set a custom aspect ratio value for displaying any kind of YouTube videos
Ability to loop continuously once it finishes playing
Ability to show related videos from the same channel as the initial video
Automatically load the video title as the caption
The same UI as the default core/embed, and you can use the video title as the caption of the block with one click
It can be transformed from/to the core embed block.
Automatically convert all default core embed YouTube blocks to this block with one line of code.

This plugin also provides a PHP API for developers to render a YouTube video URL as this block; or to automatically transform core/embed YouTube videos into this block.
The simplest example is:
better_youtube_embed_block_render_block( ['url' => 'https://youtu.be/paSXmpHU9K4'] );

The example with all the parameters is:
better_youtube_embed_block_render_block(
[
'url' => 'https://youtu.be/paSXmpHU9K4',
'aspectRatio' => '16/9',
'isMaxResThumbnail' => false,
'caption' => 'My awesome video',
'customThumbnail' => 'https://example.com/bg.jpg',
'settings' => ['loop' => 1, 'rel' => 0],
'echo' => false,
]
);

To automatically transform all core/embed YouTube videos on your site to this block, you need to put the following code to the wp-config.php file or your theme/plugin:
define('BYEB_SPEED_UP_YOUTUBE_VIDEOS', true);

or
add_filter( 'byeb_speed_up_youtube_videos', '__return_true' );

On iOS, browsers like Safari and Chrome require two clicks to play videos. If you want to allow users to play videos with a single click, you need to add the following code to the wp-config.php file or your theme/plugin:
define('BYEB_FORCE_IFRAME_ON_UNSUPPORTED_BROWSERS', true);

Please check out this page to see how fast it helps. The page contains around 30 embedded YouTube videos but they don’t slow down the page.
If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it.
Please check out my other plugins if you’re interested:

Content Blocks Builder – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.
Meta Field Block – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.
SVG Block – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon.
Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.
Block Enhancements – Adds practical features to blocks like icons, box shadows, transforms, etc.
Counting Number Block – A block to display numbers with a counting effect

The plugin is developed using @wordpress/create-block.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「YouTube Block – A better way to embed YouTube videos, shorts, playlists」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.1.0 | 1.1.1 | 1.1.2 | trunk |

延伸相關外掛（你可能也想知道）

  • EmbedPress – PDF Embed, PDF 3D FlipBook, Instagram Social Feeds, Google Docs, Vimeo, Wistia, YouTube Videos, Maps & Upload PDF Documents 》EMBEDPRESS - 從150多個來源嵌入任何東西 - YouTube、Google文件、Drive、地圖、Vimeo、Wistia、Spotify、Boomplay、PDF、PPT等，並通過Elementor、Block Edi...。
  • iframe 》, 高級 iFrame Pro, iframe, 捐贈, GitHub, , [iframe src=”http://www.youtube.com/embed/oDlbBy9vfgI” width=”100%” height=̶...。
  • Advanced iFrame 》看起來您正在尋找一個 WordPress 外掛 - Advanced iFrame Pro。這個外掛可讓您使用 iframe 包含其他網頁到您的網站中，同時具有隱藏和修改元素、自動調整高度...。
  • Insert Pages 》Insert Pages 可讓您使用 Shortcode API，將任何 WordPress 內容（例如，頁面、文章、自訂文章類型）嵌入其他 WordPress 內容。它還包括一個小工具，可將頁面...。
  • Compact WP Audio Player 》Compact WordPress Audio Player 插件是一個基於 HTML5 + Flash 混合的 WordPress 外掛，可以透過使用 shortcode 在 WordPress 文章或頁面中嵌入 mp3 音頻文...。
  • Advanced Responsive Video Embedder for Rumble, Odysee, YouTube, Vimeo, Kick … 》這是最佳的 WordPress 影片外掛嗎？支援幾乎你所能想像的一切，同時保持易用性和簡單性。這很可能是你需要的唯一一個外掛，來處理 WordPress 網站上的影片嵌...。
  • Code Embed 》注意： WordPress 5.0 及以上版本的使用者請查看常見問題以了解如何在區塊編輯器中使用此外掛。, Code Embed 外掛允許您在文章中嵌入程式碼（JavaScript 和 H...。
  • PDF.js Viewer 》透過 Gutenberg 區塊或簡單的縮略語，將 Mozilla 的 PDF.js Viewer 整合到您的網頁或文章中。PDF.js 是一個用於在瀏覽器中顯示 PDF 頁面的 JavaScript 函式庫...。
  • Embed PDF Viewer 》透過oEmbed或以區塊的方式，將來自媒體庫或其他地方的PDF嵌入至object標籤或Google Doc Viewer當作備用選項。URL只需要是可以讓全球使用的連結即可。, 靈感來...。
  • PDF viewer for Elementor & Gutenberg 》「PDFjs Viewer for Elementor」外掛是一個強大的工具，可輕鬆將 PDF 檔案嵌入到您的 Elementor 頁面建構器頁面中。它專為 Elementor 設計，因此您可以輕鬆在...。
  • PDF Viewer 》PDF Viewer 是一個 WordPress 外掛，允許您在網站上嵌入 PDF 文件，無需使用 Flash 外掛程式，僅依賴 JavaScript 來運作。這將使您的網站符合 HTML5 標準。此...。
  • Jotform oEmbed 》使用 Jotform 的 oEmbed 外掛程式，現在您可以輕鬆地在部落格文章中加入網路表單。安裝此外掛程式後，WordPress 將會辨識 Jotform 表單的 URL，以方便地嵌入...。
  • Disable Embeds 》這個外掛的功能：, , 防止他人嵌入您的網站。, 防止您嵌入非白名單網站。, 禁用所有與此功能相關的 JavaScript。, 從新版區塊編輯器中移除 WordPress 嵌入區...。
  • Videojs HTML5 Player 》Video.js HTML5 Player 是一個支持桌面和移動裝置視頻播放的用戶友好的外掛。它讓你輕鬆嵌入自主託管的視頻文件或使用 Video.js 庫的外掛視頻文件。, , Video...。
  • File Manager for Google Drive – Integrate Google Drive with WordPress 》使用這款最佳且使用者友善的「Google Drive」WordPress外掛，讓您的Google Drive與WordPress完美整合，體驗順暢的使用體驗。, , 輕鬆地在您的網站上管理和分...。

文章
Filter
Apply Filters
Close
Mastodon