Embedding Behance Projects Responsively: A Practical Guide

Problem: Showcasing a Behance portfolio without building a custom gallery

Many designers want to display their Behance work on a personal site or blog, but building a lightweight gallery that matches Behance’s look and feel can be time‑consuming. Behance offers an embed feature that lets you place a live project inside an <iframe> while keeping the project’s interactive elements (likes, comments, view counts) intact.

Thesis: Use Behance’s embed code with its responsive postMessage height negotiation to get a seamless, scroll‑free display that adapts to any viewport.

1. Getting the embed code

Open the Behance project you wish to share, click the Share button, then choose Embed. Behance generates a snippet similar to:

<iframe src="https://www.behance.net/project/12345678?embed=1" 
        width="100%" height="400" frameborder="0" 
        scrolling="no" allowtransparency="true"></iframe>
<script type="text/javascript" src="https://www.behance.net/v2/js/project_embed.js"></script>

The ?embed=1 query parameter tells Behance to strip its header and footer, leaving only the project view. The accompanying script handles the height negotiation via postMessage.

2. How the responsive iframe works

When the iframe loads, the Behance script sends a message to the parent window containing the desired height of the project’s content. The parent page’s listener (included in the script) sets the iframe’s height style to match, eliminating vertical scrollbars when the content fits. This happens automatically on:

• Initial load
• Dynamic content changes (e.g., opening a modal inside the project)
• Viewport resizes, because the script re‑measures after a resize event

No custom CSS or JavaScript is required on your side; the iframe self‑adjusts.

3. Customizing the embed

Beyond ?embed=1, you can add other query parameters:

• &tracking_ref=your-site – adds a referral tag for analytics.
• &logo=0 – hides the Behance logo in the corner (subject to Behance’s branding guidelines).
• &app_id=your‑app – if you have a registered Behance app, you can pass its ID for richer integrations.

Place any additional parameters after the ?embed=1 token, separated by &. For example:

<iframe src="https://www.behance.net/project/12345678?embed=1&tracking_ref=mysite" 
        width="100%" height="400" frameborder="0" 
        scrolling="no" allowtransparency="true"></iframe>

4. Worked example: embedding a test project

Create a simple HTML file (test-behance.html) and paste the snippet below, replacing 12345678 with a real project ID from your Behance account:

<!DOCTYPE html>
<html lang="en">
<head>
    
    Behance Embed Test</title>
</head>
<body>
    <h1>My Behance Project</h1>
    <iframe src="https://www.behance.net/project/12345678?embed=1" 
            width="100%" height="500" frameborder="0" 
            scrolling="no" allowtransparency="true"></iframe>
    <script type="text/javascript" src="https://www.behance.net/v2/js/project_embed.js"></script>
</body>
</html></code></pre>
<p>Open the file in a browser. No special permissions are needed; the page runs locally or on any static host. To verify the embed is working:</p>
<ol>
  <li>Open DevTools → Elements and confirm the <code><iframe></code> has a <code>src</code> attribute containing <code>?embed=1</code>.</li>
  <li>Switch to the Console tab and look for messages from <code>behance.net</code> (the script logs none by default, but you can monitor <code>window.addEventListener('message', …)</code> to see height updates).
  </li>
  <li>Resize the browser window; the iframe’s height should change without showing a scrollbar.</li>
</ol>
<h2>Trade‑off and limitation</h2>
<p>The embed relies on Behance’s CDN‑cached JavaScript and iframe source. While this makes repeat loads fast, any change you make to the original project (e.g., editing images or updating the description) may take <strong>up to a few minutes</strong> to appear in the embed because the CDN edge nodes must refresh. Additionally, strict Content‑Security‑Policy (CSP) rules or ad‑blockers that block third‑party frames or scripts will prevent the iframe from loading, leaving a blank space. If your site enforces a CSP, you must allow:</p>
<ul>
  <li><code>frame-src https://www.behance.net</code></li>
  <li><code>script-src https://www.behance.net</code></li>
</ul>
<p>Always check Behance’s <a href="https://www.behance.net/help/terms" target="_blank" rel="noopener">Terms of Service</a> for attribution requirements when using embeds commercially.</p>
<h2>Actionable closing</h2>
<p>To add a Behance project to your site:</p>
<ol>
  <li>Copy the embed code from the project’s Share → Embed dialog.</li>
  <li>Paste it into the HTML where you want the project to appear.</li>
  <li>Optionally add tracking or branding query parameters.</li>
  <li>Test in a browser, verify the <code>src</code> and watch the height adjust on resize.</li>
  <li>If you use CSP, add the required directives; otherwise monitor for ad‑blocker reports.</li>
</ol>
<p>With these steps you get a responsive, up‑to‑date showcase of your Behance work without maintaining a separate gallery.</p>