{"id":135733,"date":"2021-02-01T22:18:32","date_gmt":"2021-02-01T22:18:32","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/poppable\/"},"modified":"2026-01-19T12:08:35","modified_gmt":"2026-01-19T12:08:35","slug":"poppable","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/poppable\/","author":17874913,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"1.0.0","tested":"6.9.4","requires":"6.7","requires_php":"7.4","requires_plugins":null,"header_name":"Poppable - The Easy Way to Add a Video Modal","header_author":"Engramium","header_description":"Increase user interactivity and create curiosity.","assets_banners_color":"","last_updated":"2026-01-19 12:08:35","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":849,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.2":{"tag":"0.2","author":"engramium","date":"2026-01-19 12:08:35"},"1.0.0":{"tag":"1.0.0","author":"engramium","date":"2026-01-19 12:08:35"}},"upgrade_notice":[],"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":{"poppable\/poppable":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"poppable\/poppable","version":"1.0.0","title":"Poppable","category":"poppable","icon":"format-video","description":"Display YouTube videos in a poppable modal.","attributes":{"contentWidth":{"type":"string","default":"800px"},"triggerId":{"type":"string","default":"poppable-video-modal"},"videoUrl":{"type":"string"},"autoplay":{"type":"boolean","default":false},"showCloseButton":{"type":"boolean","default":false},"closeOnClickOutside":{"type":"boolean","default":false},"escOnClose":{"type":"boolean","default":false}},"supports":{"html":false},"editorScript":"file:.\/index.js","style":"file:.\/style-index.css","viewScript":"file:.\/view.js","render":"file:.\/render.php"}},"tagged_versions":["0.2","1.0.0"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[237,50938,491,178076,254270],"plugin_category":[],"plugin_contributors":[184287],"plugin_business_model":[],"class_list":["post-135733","plugin","type-plugin","status-publish","hentry","plugin_tags-lightbox","plugin_tags-play-button","plugin_tags-popup","plugin_tags-video-block","plugin_tags-video-modal","plugin_contributors-engramium","plugin_committers-engramium"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/poppable.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<p><strong>Key Features:<\/strong><\/p>\n\n<ul>\n<li><strong>Trigger from Any Element<\/strong> \u2013 Assign a trigger ID to any element (button, image, text) and clicking it opens the video modal<\/li>\n<li><strong>Multiple YouTube URL Formats<\/strong> \u2013 Supports youtube.com\/watch?v=, youtu.be\/, and youtube.com\/embed\/ formats<\/li>\n<li><strong>Autoplay Support<\/strong> \u2013 Optionally start playing the video automatically when the modal opens<\/li>\n<li><strong>Customizable Modal Width<\/strong> \u2013 Set the content width using px, %, vw, or any CSS unit<\/li>\n<li><strong>Multiple Close Options:<\/strong>\n\n<ul>\n<li>Close button (X) in the corner<\/li>\n<li>Click outside to close<\/li>\n<li>Press ESC key to close<\/li>\n<\/ul><\/li>\n<li><strong>Responsive Design<\/strong> \u2013 Videos maintain 16:9 aspect ratio on all screen sizes<\/li>\n<li><strong>Body Scroll Lock<\/strong> \u2013 Page scrolling is disabled when the modal is open for a focused viewing experience<\/li>\n<li><strong>Lightweight<\/strong> \u2013 No jQuery dependencies, built with vanilla JavaScript<\/li>\n<\/ul>\n\n<p><strong>Development &amp; Source Code:<\/strong>\nPoppable is open-source and developed publicly on GitHub.<\/p>\n\n<p>GitHub repository: https:\/\/github.com\/Engramium\/poppable<\/p>\n\n<h3>How to Use<\/h3>\n\n<ol>\n<li>Add the <strong>Poppable<\/strong> block anywhere on your page (it will be hidden on the frontend).<\/li>\n<li>In the block settings panel, enter your <strong>YouTube Video URL<\/strong>.<\/li>\n<li>Set a unique <strong>Trigger ID<\/strong> (e.g., <code>poppable-video-modal<\/code>).<\/li>\n<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>\n<li>Configure your preferred close options and modal width.<\/li>\n<li>Save and preview your page!<\/li>\n<\/ol>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/poppable<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>In the block editor, search for \"Poppable\" and add the block to your page.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20trigger%20the%20modal%3F\"><h3>How do I trigger the modal?<\/h3><\/dt>\n<dd><p>Add the trigger ID you set in the block settings as a CSS class to any element. For example, if your trigger ID is <code>my-video-trigger<\/code>, add the class <code>my-video-trigger<\/code> to a button or image.<\/p><\/dd>\n<dt id=\"can%20i%20have%20multiple%20video%20modals%20on%20one%20page%3F\"><h3>Can I have multiple video modals on one page?<\/h3><\/dt>\n<dd><p>Yes! Add multiple Poppable blocks with different trigger IDs, then assign each trigger ID to different elements on your page.<\/p><\/dd>\n<dt id=\"what%20youtube%20url%20formats%20are%20supported%3F\"><h3>What YouTube URL formats are supported?<\/h3><\/dt>\n<dd><p>Poppable supports all common YouTube URL formats:\n* <code>https:\/\/www.youtube.com\/watch?v=VIDEO_ID<\/code>\n* <code>https:\/\/youtu.be\/VIDEO_ID<\/code>\n* <code>https:\/\/www.youtube.com\/embed\/VIDEO_ID<\/code><\/p><\/dd>\n<dt id=\"does%20the%20video%20stop%20when%20i%20close%20the%20modal%3F\"><h3>Does the video stop when I close the modal?<\/h3><\/dt>\n<dd><p>Yes, the video automatically stops and resets when the modal is closed.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Converted to YouTube Video Popup Block<\/li>\n<\/ul>\n\n<h4>0.1<\/h4>\n\n<ul>\n<li>Initial public release<\/li>\n<\/ul>","raw_excerpt":"Display YouTube videos in a beautiful, customizable modal popup triggered by any element on your page.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/135733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=135733"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/engramium"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=135733"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=135733"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=135733"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=135733"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=135733"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=135733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}