Display YouTube videos in a beautiful, customizable modal popup triggered by any element on your page.

Engramium

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:
<ul>
<li>Trigger from Any Element – Assign a trigger ID to any element (button, image, text) and clicking it opens the video modal</li>
<li>Multiple YouTube URL Formats – Supports youtube.com/watch?v=, youtu.be/, and youtube.com/embed/ formats</li>
<li>Autoplay Support – Optionally start playing the video automatically when the modal opens</li>
<li>Customizable Modal Width – Set the content width using px, %, vw, or any CSS unit</li>
<li>Multiple Close Options:
<ul>
<li>Close button (X) in the corner</li>
<li>Click outside to close</li>
<li>Press ESC key to close</li>
</ul>
</li>
<li>Responsive Design – Videos maintain 16:9 aspect ratio on all screen sizes</li>
<li>Body Scroll Lock – Page scrolling is disabled when the modal is open for a focused viewing experience</li>
<li>Lightweight – No jQuery dependencies, built with vanilla JavaScript</li>
</ul>
Development & Source Code: 
Poppable is open-source and developed publicly on GitHub.
GitHub repository: https://github.com/Engramium/poppable
<h3>How to Use</h3>
<ol>
<li>Add the Poppable block anywhere on your page (it will be hidden on the frontend).</li>
<li>In the block settings panel, enter your YouTube Video URL.</li>
<li>Set a unique Trigger ID (e.g., <code>poppable-video-modal</code>).</li>
<li>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 <code>poppable-video-modal</code>).</li>
<li>Configure your preferred close options and modal width.</li>
<li>Save and preview your page!</li>
</ol>

Alternatives to Poppable – The Easy Way to Add a Video Modal

Top alternatives