Title: Poppable – The Easy Way to Add a Video Modal
Author: Engramium
Published: <strong>2021 年 2 月 1 日</strong>
Last modified: 2026 年 1 月 19 日

---

搜尋外掛

![](https://s.w.org/plugins/geopattern-icon/poppable.svg)

# Poppable – The Easy Way to Add a Video Modal

 由 [Engramium](https://profiles.wordpress.org/engramium/) 開發

[下載](https://downloads.wordpress.org/plugin/poppable.1.0.0.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/poppable/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/poppable/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/poppable/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/poppable/#developers)

 [技術支援](https://wordpress.org/support/plugin/poppable/)

## 外掛說明

Poppable is a lightweight Gutenberg block that lets you display YouTube videos in
a sleek modal popup. Simply add the block, paste your YouTube URL, and connect it
to any trigger element on your page.

**Key Features:**

 * **Trigger from Any Element** – Assign a trigger ID to any element (button, image,
   text) and clicking it opens the video modal
 * **Multiple YouTube URL Formats** – Supports youtube.com/watch?v=, youtu.be/, 
   and youtube.com/embed/ formats
 * **Autoplay Support** – Optionally start playing the video automatically when 
   the modal opens
 * **Customizable Modal Width** – Set the content width using px, %, vw, or any 
   CSS unit
 * **Multiple Close Options:**
    - Close button (X) in the corner
    - Click outside to close
    - Press ESC key to close
 * **Responsive Design** – Videos maintain 16:9 aspect ratio on all screen sizes
 * **Body Scroll Lock** – Page scrolling is disabled when the modal is open for 
   a focused viewing experience
 * **Lightweight** – No jQuery dependencies, built with vanilla JavaScript

**Development & Source Code:**
 Poppable is open-source and developed publicly on
GitHub.

GitHub repository: https://github.com/Engramium/poppable

### How to Use

 1. Add the **Poppable** block anywhere on your page (it will be hidden on the frontend).
 2. In the block settings panel, enter your **YouTube Video URL**.
 3. Set a unique **Trigger ID** (e.g., `poppable-video-modal`).
 4. Add the same trigger ID as a CSS class to any element you want to use as the trigger(
    e.g., a button with class `poppable-video-modal`).
 5. Configure your preferred close options and modal width.
 6. Save and preview your page!

## 適用於區塊編輯器

這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

 *   Poppable Display YouTube videos in a poppable modal.

## 安裝方式

 1. Upload the plugin files to the `/wp-content/plugins/poppable` directory, or install
    the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress.
 3. In the block editor, search for “Poppable” and add the block to your page.

## 常見問題集

### How do I trigger the modal?

Add the trigger ID you set in the block settings as a CSS class to any element. 
For example, if your trigger ID is `my-video-trigger`, add the class `my-video-trigger`
to a button or image.

### Can I have multiple video modals on one page?

Yes! Add multiple Poppable blocks with different trigger IDs, then assign each trigger
ID to different elements on your page.

### What YouTube URL formats are supported?

Poppable supports all common YouTube URL formats:
 * `https://www.youtube.com/watch?
v=VIDEO_ID` * `https://youtu.be/VIDEO_ID` * `https://www.youtube.com/embed/VIDEO_ID`

### Does the video stop when I close the modal?

Yes, the video automatically stops and resets when the modal is closed.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈Poppable – The Easy Way to Add a Video Modal〉的開發相關
工作。

參與者

 *   [ Engramium ](https://profiles.wordpress.org/engramium/)

[將〈Poppable – The Easy Way to Add a Video Modal〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/poppable)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/poppable/)、查看
[SVN 存放庫](https://plugins.svn.wordpress.org/poppable/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/poppable/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/poppable/)。

## 變更記錄

#### 1.0.0

 * Converted to YouTube Video Popup Block

#### 0.1

 * Initial public release

## 中繼資料

 *  版本 **1.0.0**
 *  最後更新 **4 個月前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.7 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.9.4**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/poppable/)
 * 標籤:
 * [lightbox](https://tw.wordpress.org/plugins/tags/lightbox/)[play button](https://tw.wordpress.org/plugins/tags/play-button/)
   [popup](https://tw.wordpress.org/plugins/tags/popup/)[video block](https://tw.wordpress.org/plugins/tags/video-block/)
 *  [進階檢視](https://tw.wordpress.org/plugins/poppable/advanced/)

## 評分

這個項目尚無任何評論記錄。

[Your review](https://wordpress.org/support/plugin/poppable/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/poppable/reviews/)

## 參與者

 *   [ Engramium ](https://profiles.wordpress.org/engramium/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/poppable/)