Embed a Behance Project in an External Website Using the Built‑In Share Feature

Desired outcome

You want visitors to view a Behance project without navigating away from your own site. By embedding the project via Behance’s native iframe share option, the portfolio appears inline, preserving your site’s layout while keeping the content hosted on Behance.

Prerequisites

• A Behance account with access to the project you wish to embed.
• The project must be set to Public; private or draft projects will not render in an iframe.
• Edit permissions for the target website’s HTML file or a CMS block that accepts custom embed code (e.g., a Custom HTML block in WordPress, an Embed component in Webflow, or a raw HTML field in a static site generator).
• A modern browser for testing (Chrome, Firefox, Safari, Edge).

Procedure

1. Open the Behance project: Log in to Behance, navigate to the project, and ensure the project page loads without requiring a login.
2. Access the share dialog: Click the Share button located near the top‑right of the project page.
3. Choose Embed: In the share pane, select the Embed tab. Behance will generate an iframe snippet similar to:

   <iframe src='https://www.behance.net/projects/1234567890/your-project-title' width='100%' height='450' frameborder='0' allowfullscreen></iframe>
   

   Replace the numeric ID and project title in the src URL with the values shown for your own project.
4. Copy the snippet: Highlight the entire iframe line and copy it to your clipboard.
5. Paste into your website:
   • If you edit raw HTML, open the file where you want the project to appear, paste the iframe code at the desired location, and save the file.
   • If you use a CMS, add a Custom HTML or Embed block, paste the code inside the block, and save/publish the page.
6. Publish or deploy: Make the page live on your staging or production environment.

Expected checks

1. Visual verification: Open the published page in a browser. The Behance project should appear inside the iframe without scrollbars, and the project title should be visible at the top of the iframe.
2. Source inspection: Right‑click the page → View Page Source (or use the browser’s developer tools). Locate the iframe tag and confirm it matches exactly the snippet you copied, including the src URL, width, height, and attributes.
3. Cross‑browser test: Repeat the visual verification in at least two different browsers (e.g., Chrome and Firefox) and on a mobile device to ensure responsive behavior.
4. Console check: Open the browser console (F12) and look for errors such as "Refused to display ... because it violates the following Content Security Policy directive". No errors should appear related to the iframe.

Troubleshooting and recovery options

• Project not public: If the iframe shows a blank area or a Behance login prompt, return to Behance, open the project settings, and set the visibility to Public. Republish the page after the change.
• Content Security Policy (CSP) blocks: Some sites send a CSP header that disallows iframes from behance.net. To diagnose, check the console for a CSP error. If you control the site’s headers, add an exception such as:

  frame-src behance.net;

  If you cannot modify headers, consider using the Behance API to fetch project data and render it via a custom component as a fallback.
• Performance impact: Embedded iframes can add load time. Mitigate by:
  • Adding the loading="lazy" attribute to the iframe tag.
  • Using a placeholder image that swaps to the iframe on user interaction (e.g., click to load).
• Responsive issues: If the iframe does not resize on narrow screens, wrap it in a container with CSS:

  .behance-embed { position:relative; width:100%; height:0; padding-bottom:56.25%; }\n.behance-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

  Then use:

  <div class='behance-embed'><iframe src='...' frameborder='0' allowfullscreen></iframe></div>
      

Limitations

• The embed only works for projects that are publicly viewable on Behance.
• Site‑level CSP or X‑Frame‑Options headers can prevent the iframe from loading; you must have authority to adjust those settings or use an alternative method.
• Because the content is hosted on Behance, you cannot modify the project’s appearance or interactivity beyond what Behance provides.
• Embedded iframes may increase page weight; test page speed after implementation.

Practical verification checklist

1. Confirm the Behance project is set to Public.
2. Paste the exact iframe snippet into the target HTML/CMS block.
3. Publish the page and open it in a browser.
4. Visually inspect that the project loads without scrollbars or login prompts.
5. Check the page source to ensure the iframe tag matches the copied snippet.
6. Open the browser console and verify no CSP or framing errors appear.
7. Repeat steps 2‑5 on at least one additional browser and a mobile device.