Poppable – The Easy Way to Add a Video Modal
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) a
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
- 01Add the Poppable block anywhere on your page (it will be hidden on the frontend).
- 02In the block settings panel, enter your YouTube Video URL .
- 03Set a unique Trigger ID (e.g., poppable-video-modal ).
- 04Add 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 ).
- 05Configure your preferred close options and modal width.
- 06Save and preview your page!
