--- title: "Open iFrame Content in FooBox" id: "176327" type: "knowledgebase" slug: "open-iframe-content" published_at: "2019-06-26T08:49:40+00:00" modified_at: "2019-07-19T12:02:13+00:00" url: "https://fooplugins.com/documentation/foobox/pro-features/open-iframe-content/" markdown_url: "https://fooplugins.com/documentation/foobox/pro-features/open-iframe-content.md" excerpt: "FooBox lets you open iFrame content inside a FooBox. See Demo Here Example Code Open iFrame Walkthrough This method is for loading external content into FooBox via an iFrame. All that’s really necessary is adding the foobox..." taxonomy_knowledgebase_cat: - "FooBox - Pro Features" --- [FooBox – Pro Features](https://fooplugins.com/documentation/foobox/pro-features/) # Open iFrame Content in FooBox ## Related Articles - [Installing FooBox Pro](https://fooplugins.com/documentation/foobox/pro-features/installing-foobox-pro/) - [Fullscreen Images](https://fooplugins.com/documentation/foobox/pro-features/fullscreen-images/) - [Open Gravity Forms in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-gravity-forms/) - [Open any HTML in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-html/) - [Open YouTube or Vimeo Videos in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-youtube-vimeo-videos/) - [Open Other Video Types in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-other-video-types/) - [Open FooGallery in FooBox](https://fooplugins.com/documentation/foobox/pro-features/open-foogallery-in-foobox/) - [Deeplinking](https://fooplugins.com/documentation/foobox/pro-features/deeplinking/) - [Proper Theme Configuration for Sharing Images](https://fooplugins.com/documentation/foobox/pro-features/theme-configuration-sharing-images/) - [Google Analytics Tracking](https://fooplugins.com/documentation/foobox/pro-features/google-analytics-tracking/) - [Social Sharing Settings](https://fooplugins.com/documentation/foobox/pro-features/social-sharing-settings/) - [Adding a Download Function to FooBox](https://fooplugins.com/documentation/foobox/pro-features/adding-download-function/) - [FooBox PRO Styling](https://fooplugins.com/documentation/foobox/pro-features/pro-styling/) **Need more help?** Browse all documentation or open a support ticket. [All docs](/documentation/) [Support](/support/) FooBox lets you open iFrame content inside a FooBox. [See Demo Here](https://fooplugins.com/foobox/demos/) ## Example Code Open iFrame ## Walkthrough This method is for loading **external** content into FooBox via an iFrame. All that’s really necessary is adding the foobox class and target. There are also a few other handy attributes you can utilize as well. ### Set a Max Height or Width You can also set a max height or width in case you don’t want the iFrame to fill the entire screen on larger screens. These settings should be thought of as “max-height” or “max-width”. The iFrame will continue to be responsive to screen sizes that are shorter or narrower than these setting, but it will not grow larger than these settings. To do this, just add your desired pixel height and width to the following attributes: data-height=”600″ data-width=”480″ It’s important to notice that there is NO “px” in the attributes. You can also set the data-height and data-width. And here’s the code used to do that: Visit this story here” data-width=”600″ data-height=”480″>Open “The New Silk Road” in an iframe with “data-wdith=’600′” and “data-height=480″ ## Insecure Content Please note that if your website is secured by https using a SSL certificate and you try to open an insecure http connection in a FooBox iframe the content will be blocked resulting in FooBox showing a blank content area. Please make sure you use an https:// connection. 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/)