How to add a 3D photo to WordPress without a plugin

Every “3D photo WordPress” result is a plugin: a parallax slider that wants you to supply separately cut layers, plus its own scripts on every page. You don't need one. A Gifsy scene is a single <iframe>, and WordPress has had a block for pasting HTML since 5.0. This is the WordPress chapter of the guide to interactive 3D photos for websites.

Quick answer: the 5 steps

1. Make the 3D photo. Upload one photo at gifsy.fun/create, generate, and click Publish. Copy the iframe.
2. Add a Custom HTML block. In the block editor, press / and type 'html' → Custom HTML. Paste.
3. Preview inside the editor. The block's Preview tab renders the iframe so you can see it before saving.
4. Make it responsive. Wrap the iframe in a div with an aspect ratio so the theme's content width can't squash it.
5. Publish as an editor or admin. Contributors and authors have the iframe stripped on save.

Why no plugin

The plugins solve a different problem: they animate layers you already have. You cut the subject out in Photoshop, export it as a PNG, hand the plugin the layers, and its slider moves them. Gifsy does the cutting and the depth estimation from one photo before it gets anywhere near WordPress, and the result is hosted; the page only needs the frame. No scripts in your theme, nothing to update, nothing that breaks when the theme changes.

Block editor: Custom HTML

1. Make and publish your scene at gifsy.fun/create; copy the snippet.
2. In the post or page, click + or type /html and choose Custom HTML.
3. Paste the snippet into the block.
4. Click the block's Preview tab to see it render, then HTML to go back.
5. Update or Publish.

Don't paste into a Paragraph block: it escapes the angle brackets and prints the code as text. And don't use the Embed block — like Squarespace's, it works from a URL via oEmbed and won't recognise a plain iframe.

Elementor, other builders, and the classic editor

• Elementor: drag the HTML widget into a column and paste. Size the column; the snippet below fills it.
• Divi: the Code module. Bricks: the Code element (execution enabled). WPBakery: Raw HTML.
• Classic editor: switch from Visual to the Text tab before pasting. The Visual tab will mangle it.
• Widgets and templates: a Custom HTML block works in block-based widget areas and in Appearance → Editor template parts too.

The iframe disappears on save (wp_kses)

This is the WordPress-specific trap, and it is silent. WordPress runs content through a filter called wp_kses for any user who lacks the unfiltered_html capability, and that filter removes <iframe> tags. On a normal single site, Administrators and Editors have the capability; Authors and Contributors don't. On a WordPress multisite, nobody has it by default — not even site admins — unless the network admin grants it or a plugin does.

So: if you paste the snippet, save, and the block is empty or the preview is blank, check who saved it. Paste it as an Editor or Administrator, or have one do it. Nothing is wrong with the snippet.

Responsive in a theme you don't control

Themes set a content width and some clamp iframes; the copied snippet's fixed 500 px height then produces a letterboxed or squashed frame. Use an aspect-ratio wrapper so the frame follows the column's width whatever the theme does:

<div style="position:relative;width:100%;aspect-ratio:4/3">
  <iframe
    src="https://www.gifsy.fun/embed/<id>"
    title="Interactive 3D photo: …"
    loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
  ></iframe>
</div>

4/3 or 16/9 for landscape scenes, 3/4 for portrait. If your theme has “wide” and “full” block alignments, set the Custom HTML block to wide for a bigger stage. Keep loading="lazy" below the fold; remove it for a scene at the top of the page.

As a hero or featured image

Featured images are attachments, so the scene can't go in that slot. For a hero, put the Custom HTML block first in the content with a 16/9 or 21/9 wrapper and the full alignment, and put the headline in its own block above or below it rather than layered on top — a block layered over the frame swallows the drag. On block themes, the same block works inside a header template part.

FAQ

Make a 3D photo from your own image. Related: the full iframe embed guide, the Squarespace version, and how 3D photos work.