Embedding a 360 virtual tour on any website: iframe vs. script, sizing and the gotchas

Real estate and architecture sites increasingly put a walkable 360° tour right on the listing page instead of linking out. Under the hood it's just an iframe, but there are a few decisions that decide whether it feels native or broken. This is what we've learned building embeds for Prewalk, a browser-based 360° tour tool, but most of it applies to any panorama viewer.

1. Two ways to embed: iframe + script, or iframe only

Iframe + a small script (the nicer option)

• The script listens for messages from the viewer and resizes the iframe to fit the content, so you don't hard-code a height.
• It can also hand off to real full screen on your own page, which matters a lot on phones.

Iframe only, fixed height (the fallback)

• Use it when the site builder strips <script> tags (Wix, Google Sites and many CMS text fields do).
• You choose the height yourself. On iPhone Safari, full screen inside a cross-origin iframe is limited, so a fixed-height embed usually opens the tour in a new tab instead.

Rule of thumb: start with iframe + script. If the embed doesn't resize or full screen does nothing, the platform blocked the script, so switch to the fixed-height version.

2. Make the fixed-height version responsive

If you can't run a script, at least let the browser keep the ratio:

<div class="tour">
  <iframe
    src="https://example.com/embed/TOUR_ID"
    title="Apartment 3B: 360° virtual tour"
    loading="lazy"
    allow="fullscreen; xr-spatial-tracking"
    allowfullscreen>
  </iframe>
</div>

<style>
  .tour iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
  }
  @media (max-width: 600px) {
    .tour iframe { aspect-ratio: 4 / 5; } /* taller on phones */
  }
</style>

• loading="lazy" keeps a heavy WebGL viewer from competing with the rest of your page on first load.
• xr-spatial-tracking lets the viewer offer VR mode in headset browsers.
• A real title helps screen readers and is free.

3. Phones: don't hijack the page scroll

A 360° viewer wants every drag; your visitor wants to scroll past it. A good compromise is two-finger navigation on touch devices: one finger scrolls the page, two fingers look around. Prewalk exposes this as an embed option; if your viewer doesn't, at least avoid making the iframe full height on mobile.

4. Where to paste it on common builders

• WordPress: a Custom HTML block (or the Text/Code tab in the classic editor).
• Wix: Add Elements > Embed Code > Embed HTML. Usually needs the fixed-height version.
• Squarespace: a Code block set to HTML. Scripts run on paid plans.
• Webflow: an Embed element. It renders on the published site, not in the designer.
• Google Sites and similar: fixed height only.

The most common mistake: pasting the code into a normal text block, which just prints the HTML as text.

5. Content Security Policy and "refused to connect"

If your site sends a CSP header, the viewer's origin has to be allowed in frame-src (or child-src):

Content-Security-Policy: frame-src 'self' https://prewalk.co;

The opposite direction matters too: the tour host may restrict which sites can embed it (Prewalk lets you turn embedding off or, on paid plans, allow-list specific domains). "Refused to connect" in the iframe is almost always one of these two.

6. Privacy isn't what you think

A tour shared as "link only" is not private once it's embedded: anyone who can open your page can watch it. Use password protection if that matters.

7. Small things that make it feel native

• Match the viewer theme (light or dark) to the page background.
• Make sure every room has a way back. A visitor stuck in the bathroom on your listing page just leaves.
• Pick the opening view deliberately. It's also what link previews show.

If you want to try this with your own panoramas, Prewalk has a free plan with the embed code included, and the full walkthrough is in our guide: Embed a tour on your website. Happy to answer questions in the comments.