How can I embed a webpage using "iframe src" in Webflow if nothing is showing up?

TL;DR
  • Verify iframe code syntax and check the src URL.
  • Address CORS policy or X-Frame-Options issues, possibly by contacting the website owner.
  • Use the Webflow Embed element correctly, ensuring placement in a visible section.
  • Inspect via the browser console for errors and confirm permissions for embedding.

Encountering an issue where an embedded webpage using an iframe in Webflow isn’t displaying can be frustrating. Below are steps to troubleshoot and resolve this issue.

​

1. Check the iframe Code

  • Ensure your iframe code syntax is correct. It should look like <iframe src="https://example.com"></iframe>.
  • Verify that the src URL is correct. Test the URL in your browser to make sure it loads outside of Webflow.

​

2. Address CORS Policy Issues

  • Cross-Origin Resource Sharing (CORS) can block an iframe if the server settings don’t allow it.
  • Contact the website owner to see if they can update their CORS settings or provide an iframe-friendly URL.

​

3. Use Webflow Embed Element

  • Add an Embed element to your Webflow project.
  • Paste the iframe code into the Embed settings.
  • Ensure the Embed component is placed within a visible section on your page.

​

4. Adjust Source Page Settings

  • Ensure the source website's X-Frame-Options header is not set to deny or sameorigin as this will prevent the content from being loaded in an iframe.
  • Check for any server-side restrictions that might forbid embedding.

​

5. Browser Console Inspection

  • Inspect the page using Developer Tools (usually opened with F12 or right-click and select Inspect).
  • Look for error messages related to the iframe that might indicate what's going wrong, like security policies or broken URLs.

​

6. Ensure Proper Permissions

  • Confirm you have the right permissions to embed the page as some websites deliberately restrict embedding through iframes for security reasons.

​

Summary

If your embedded iframe in Webflow isn't displaying, ensure the iframe code and URL are correct, adjust CORS and X-Frame-Options settings if needed, use the Webflow Embed component correctly, and check the browser console for errors. If restrictions are imposed by the content source, consider contacting the provider or exploring alternative integrations.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I easily redirect my website to a specific URL with language detection using Webflow?
How can I use MixitUp Filters on collections with more than 100 items in Webflow?
How can I stop HTML5 videos from playing in a Webflow modal when it is closed?
Can I stack two images in Webflow with just one click, if they have the same size?
Why am I unable to edit the class in Webflow when I receive the message "The value is overridden by more specific selector"?
How can I downgrade my Ecommerce basic site to the CMS plan on Webflow if I keep getting a "Conflict" error message when I try to do so despite trying multiple credit cards?
How can I create hierarchical categories and subcategories in Webflow for a net shop, and can these categories be used to dynamically order products?
How can I set the opacity of background images in Webflow using pseudo elements or hand-coding?
Does anyone have experience building a custom video lightbox in Webflow that starts playing a Vimeo video when a button outside the lightbox is clicked?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
Why can't I add a checkbox inside a dropdown widget in Webflow? And how can I create a multi-select dropdown with an expanded view in Webflow that allows the user to select multiple options without relying on the Cmd key?
How can I solve the issue of my custom fonts "jumping" back to the fallback font when launching my Webflow site in Google Chrome? I have already tried using .ttf, .eot, and .woff versions of the font, but it hasn't resolved the problem. Any suggestions?
Is it possible to create a hidden honeypot field in a Webflow form that doesn't display in the email submission? I want to automatically filter out spam emails using an email software provider without removing the honeypot field name.
What is causing the "TypeError: Cannot convert undefined or null to object" error on multiple pages in Webflow?
Has anyone found a way to create a copy to clipboard button in Webflow that can dynamically copy the link of a CMS item without manually creating a link for each button? Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?