--- title: "Creating Video and Iframe Lightboxes (FooBox Pro)" id: "196436" type: "knowledgebase" slug: "foobox-video-iframe-lightboxes" published_at: "2026-07-24T09:19:35+00:00" modified_at: "2026-07-24T10:33:15+00:00" url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-video-iframe-lightboxes/" markdown_url: "https://fooplugins.com/documentation/foobox/block-editor/foobox-video-iframe-lightboxes.md" excerpt: "FooBox Pro Button blocks can open supported video URLs, self-hosted videos, and external pages. The target and handler are configured in the same FooBox panel used for image Buttons." taxonomy_knowledgebase_cat: - "Block Editor" --- [Block Editor](https://fooplugins.com/documentation/foobox/block-editor/) # Creating Video and Iframe Lightboxes (FooBox Pro) ## Related Articles - [Getting Started with FooBox in the Block Editor](https://fooplugins.com/documentation/foobox/block-editor/foobox-block-editor-getting-started/) - [Creating Image Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-image-lightboxes-block-editor/) - [Creating Gallery Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-gallery-lightboxes-block-editor/) - [Creating Button Lightboxes](https://fooplugins.com/documentation/foobox/block-editor/foobox-button-lightboxes-block-editor/) - [Opening Hidden Block Content (FooBox Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-hidden-block-content/) - [Creating Custom Lightbox Groups](https://fooplugins.com/documentation/foobox/block-editor/foobox-custom-lightbox-groups/) - [Using FooBox with the WordPress Core Lightbox](https://fooplugins.com/documentation/foobox/block-editor/foobox-wordpress-core-lightbox/) - [Opening Shortcodes and FooGallery in FooBox (Pro)](https://fooplugins.com/documentation/foobox/block-editor/foobox-shortcodes-foogallery/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) FooBox Pro Button blocks can open supported video URLs, self-hosted videos, and external pages. The target and handler are configured in the same FooBox panel used for image Buttons. Video and iframe lightboxes require FooBox Pro ## See video and iframe lightboxes in action Explore working FooBox demos for YouTube, self-hosted video, and iframe content, then choose the right license for your site. [See video and iframe demos](/foobox/demos/#examples) [View FooBox pricing](/foobox/#pricing) ## YouTube and supported video URLs 1. Add and select a Button block. 2. Open **Block → Content → FooBox** and enable FooBox. 3. Set **Content type** to **Video**, or use **Auto-detect from URL** for a supported service URL. 4. Paste the video URL into **Lightbox URL or target**. 5. Set Width and Height. `960 × 540` is a useful starting point for 16:9 video. 6. Choose an optional style, theme, opening effect, and caption. ![Button configured with the FooBox Pro Video content type](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20735'%3E%3C/svg%3E)Auto-detection selects the video handler from a recognized URL. Choose Video explicitly for a self-hosted file or when the URL is otherwise ambiguous. ![A YouTube URL configured with the Video handler, 16:9 dimensions, and a caption](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20735'%3E%3C/svg%3E)## Self-hosted video and poster images Upload an MP4 or another browser-compatible video to the Media Library. Select a Button, choose **Video**, then click **Select from media library** beside the target field. ![A self-hosted nature video selected from the WordPress Media Library](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20900%20470'%3E%3C/svg%3E)For self-hosted video, add a poster so the lightbox has a useful visual before playback begins: 1. Enter a **Poster image URL**, or click **Choose poster image**. 2. Pick an image from the Media Library. 3. Use Replace or Remove poster image to manage it later. ![FooBox Pro poster image controls for a self-hosted video](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20390%20870'%3E%3C/svg%3E)Preview the page and click the Button. Confirm the video controls, poster, aspect ratio, and close control are usable. ![A self-hosted nature video open inside FooBox](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)The poster URL is saved with the trigger as FooBox cover data. ## Iframe content Use an iframe when the lightbox should display another web page: 1. Add and select a Button. 2. Enable FooBox. 3. Set **Content type** to **Iframe**. 4. Enter the complete page URL in **Lightbox URL or target**. 5. Set Width and Height for the embedded page. 6. Choose optional appearance settings and captions. ![Button configured to open a URL with the Iframe content type](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20775'%3E%3C/svg%3E)![An external page rendered in an iframe inside FooBox](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%201000'%3E%3C/svg%3E)The destination site must permit iframe embedding. A site can block embedding with its response headers; FooBox cannot override that restriction. ## Troubleshooting - **The video opens as a normal link:** confirm FooBox Pro is active, Enable FooBox is on, and the content type is Video or supported Auto. - **A self-hosted video will not play:** verify the file format and MIME type are supported by the visitor’s browser. - **The poster does not display:** poster controls apply to FooBox Pro video content; verify the image URL is reachable. - **The iframe is blank or refused:** use a destination that permits iframe embedding. - **The content is too small:** set explicit Width and Height on the Button’s FooBox controls. Resources ## Find the right next step Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages. ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Documentation Search setup guides, product docs, and troubleshooting articles. [Browse docs](/documentation/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Support Open a ticket with product details so we can help quickly. [Get support](/support/) ![Image](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)### Licensing Review account, renewal, refund, and license information. [View details](/licensing/)