How to embed an iframe in Ghost
Ghost takes full iframe code in the HTML card. Open the card menu, add an HTML card, and paste the code. The iframe shows on the web post, but email clients block it in newsletters.
3 min read · Updated
- Raw iframe code
- Yes
- HTML card
- Yes
- In newsletters
- Email clients block iframes
Steps
Step 1: Click + or type / on a new line
The card menu opens. Type to search for a card.
Step 2: Choose the HTML card
Select HTML in the card menu. Ghost adds an empty HTML card to the post.
Step 3: Paste the iframe code
Paste or write the full iframe code in the card.
Step 4: Set who sees the card
Click the eye icon in the card toolbar. Show the HTML to public visitors, free members, or paid members.
Check your URL first
If the page blocks framing, the HTML card shows an empty box or an error.
Limits
Email clients disable iframes and JavaScript embeds, so an embed in an HTML card does not work in a newsletter.
In newsletters, Ghost shows YouTube and Vimeo embeds as links that open the video.
A pasted link becomes an embed only for supported tools such as YouTube, Spotify, and SoundCloud. Other links become a bookmark card.
Troubleshooting
- The frame is blank on the post
The framed page sends X-Frame-Options or a CSP frame-ancestors rule. Test the URL to see which header blocks it.
Blank iframe, no error- "Refused to connect"
The site does not allow other sites to frame it. Only the site owner can change that header.
"Refused to connect": cause and fix- Signed out in the frame
The browser blocks the cookies of the framed site. Open the page in a new tab to sign in.
Login doesn't stick
- Ghost Help: Editor cards · ghost.org
- Ghost Help: Intro to the editor · ghost.org
- Ghost Help: Can I use embeds in email newsletters? · ghost.org
- Ghost: Pricing · ghost.org