How to embed interactive videos in blog posts and webpages

How to embed an interactive video in a blog post

These steps use Mindstamp. Other interactive video tools follow the same pattern under different menu names.

1. Open the video and select Share. If the video is not published yet, select Publish Video. An unpublished embed shows "Video not available: Not published" to your readers.
2. Under Embed, choose Responsive, Popout, or Basic iframe. Responsive suits most posts; the next section explains the other two.
3. Optional: turn on Include SEO metadata. It adds structured video data (title, description, thumbnail, duration, and chapters) and a collapsed transcript to the code.
4. Select Copy embed code.
5. In your editor, add an HTML, code, or embed block right after the paragraph the video supports, and paste the code there. If you paste it into a normal text paragraph, the page shows the code as text.
6. Publish the page. Open it in a private browser window and on a phone, play the video, and use every interaction once. Then open Reporting in Mindstamp and check that the view arrived. Each view lists the page URL where it played.

The code you paste is an iframe, sometimes followed by a short script. A basic version looks like this:

<iframe src="https://embed.mindstamp.com/e/VIDEO_ID" title="Product tour: choose your role" width="100%" height="450" loading="lazy" allow="autoplay; fullscreen; picture-in-picture; microphone; camera; clipboard-write" allowfullscreen></iframe>

Keep the allow list exactly as you copied it. A voice or video response question needs camera and microphone access, and browsers grant that only on an HTTPS page. If your code has no title attribute, add one that names the video. Screen readers announce it, and the W3C lists it as a technique for naming frames under WCAG (technique H64). Our guide to embedding a video with HTML covers iframes and the video tag in more detail, and the Mindstamp help article on embedding a video on your website has the troubleshooting list.

Where to paste embed code in WordPress, Webflow, Squarespace, Wix, and HubSpot

All of these platforms accept embed code, but each one names the block differently, and some restrict iframes by plan or user role.

Where each platform takes embed code, from each vendor's help pages (checked October 2026)

Platform	Where to paste the code	What to watch for
WordPress (self-hosted)	A Custom HTML block. Type /html in a new paragraph to add one.	For users without the unfiltered_html capability, such as Contributors, WordPress strips iframe and script tags when the post is saved. Ask someone with that capability, usually an Administrator, to add the block.
WordPress.com	A Custom HTML block	iframe and script tags need a paid plan with hosting features activated, which means at least one plugin installed.
Webflow	A Code Embed element from the Add panel	The Designer may show a blank box, so test on the published site. Webflow limits the length of a Code Embed; if a long transcript makes the code too long, turn off Include SEO metadata and copy it again (Webflow steps).
Squarespace	A Code block set to HTML	JavaScript and iframes in code blocks need a Core, Plus, Advanced, Business, or Commerce plan. Code can stay hidden while you are logged in; use Preview in Safe Mode to check it.
Wix (site pages)	Add Elements, then Embed Code, Popular Embeds, and Embed HTML	The code must use HTTPS. Wix does not make embedded code responsive, so set the iframe width and height to 100%.
HubSpot blog posts and pages	Click the rich text module, open the Insert menu, and select Embed	Marketing emails do not accept embedded media. Link to the video from email instead.
Ghost	An HTML card	Ghost's embed card works from pasted URLs for oEmbed providers. Use the HTML card for embed code.

Some publishing tools accept only a plain link, or only URLs from oEmbed providers such as YouTube. Mindstamp has no oEmbed option, so on those platforms the player cannot sit inside the post. Add a thumbnail image that links to the video's share link instead. The reader opens the interactive version in a new tab, and their views and answers still reach your reports.

Responsive, popout, or basic iframe: which embed to use

The embed type decides how the player loads and how much it can do on your page.

• Responsive fits most posts. It fills the width of its column at a 16:9 shape, keeps a minimum height so the player stays usable on phones, and loads lazily. It also includes a short script that lets a click action open a link in your page.
• Popout suits long posts and pages with strict speed targets. Only a thumbnail and a small script load with the page. The player loads when the reader selects the thumbnail and opens in an overlay that closes with the Escape key.
• Basic iframe is for builders that remove scripts. Set its width and height in the builder. Without the script, a click action meant to change your page may not work.

For a vertical 9:16 video, edit the Responsive code: change aspect-ratio:16/9 to aspect-ratio:9/16 and add a maximum width so the frame does not fill a desktop screen (vertical video steps). The responsive embed fit check shows one player at phone, tablet, and desktop widths.

The Playback options on the Share page (Autoplay (muted), Loop, and Start at) are written into the code when you copy it. If you change one, copy the code again and replace the old code in your post. Edits to interactions or design do not change the code, so the embed picks them up without a new paste.

Six interactive video formats for blog posts and webpages

Each format below solves one problem a reader has on a particular kind of page. For more formats with live examples, see our list of interactive video examples, and for the build itself, our step-by-step guide to creating an interactive video.

Product demo with a choose-your-path menu

On a feature page or a launch post, readers want different parts of the same demo. Open the video with a few buttons named after what people come for, such as Scheduling, Reporting, and Integrations, and send each one to its section with video branching or a change-time action. Add chapters so readers can come back to a section later. The report then shows which section each viewer chose, which tells your sales team more than a play count. The buyer-stage product tour shows this pattern, and our post on building an interactive product demo walks through the setup.

How-to video with chapters and a searchable transcript

Readers often come back to a tutorial for one step. Chapters and a searchable transcript let a reader jump to the step they need instead of scrubbing the timeline. Mindstamp creates the transcript for you, and you can edit names and terms afterward. Viewers can search inside the video and select a line to jump to that moment. Transcripts work for uploaded videos and MP4 links, not for HLS links or YouTube sources (transcript help). The chapter selector example opens the task a viewer picks.

Book a meeting without leaving the video

On a sales page or a webinar recap, the step after "this looks useful" is a meeting. Add a button with the Open Link Modal click action and paste the link to your Calendly or HubSpot meetings page. The video pauses, the calendar opens over the player, and playback continues when the reader closes it. Click values accept variables, so if your scheduling tool can prefill its form from the link, you can pass the viewer's name and email. Mindstamp records the click, and the booking itself stays in your scheduling tool. Place the button after the video has answered the reader's main question, or put it in the Magic Menu so it is always available (calendar setup, calendar embedding, and the calendar booking example).

Customer story with a next step

A testimonial in a case study post or on a pricing page should lead somewhere. Add a button at the moment the customer states the result, linked to the full case study, your pricing page, or a trial. Use a hotspot when the thing to click is on screen, such as the product the customer is using. If you sell through Shopify, an Add to Cart action on a button or hotspot opens an in-video cart, and Shopify shows which video started the order (Shopify setup).

Quiz or knowledge check

A question pauses the video, so put it right after the point it checks. A scored multiple-choice question works on a training or explainer post. On a landing page, a short product quiz can recommend a product from the answers (product quiz example). Mindstamp has 13 question types, and multiple choice and free response cover most blog uses. A 2019 article on the PR 20/20 agency blog, which now opens on Ready North's site, made the same case for marketing assets: add quizzes and assessments to static premium content such as PDFs. Try the video quiz example, or read how to create an interactive video quiz.

Feedback or a quick poll

Ask for feedback where the reader has just finished something, such as the end of a tutorial or a product update post. Three question types fit:

• A rating question collects one to five stars.
• A Likert question uses a fixed five-point scale from Strongly agree to Strongly disagree.
• A free-response question takes a sentence in the reader's own words.

Mindstamp stores each answer against the viewer, and the Questions report breaks down the answers to each question.

Where to place the video, and how long to make it

Place it next to the text it supports

Put the embed directly after the paragraph that sets up its first interaction. If a question appears before the text that explains it, the reader has nothing to answer from. Use one interactive video per page where you can, because each embed loads its own player. Do not autoplay a video below the fold. Mindstamp's autoplay starts muted and turns the sound on at the reader's first click, and browsers can still block it (autoplay help).

A landing page follows different rules from a blog post: the video is often the main content and sits at the top. Our guide to video landing pages covers those layouts, and the landing page intent example asks visitors why they came.

Keep it short, or split it into chapters

Across 8.07 million views of 18,315 Mindstamp videos (2018 to October 2026), videos of one minute or less averaged 59.4% of the video watched per view, and videos of two to five minutes averaged 39.2%. Ten-to-20-minute videos averaged 53.8% watched and had the most viewer actions, at 6.70 per view. These are Mindstamp customers' videos, mostly training, marketing, and sales, and the numbers show a pattern, not proof that interactions keep people watching. For a blog post, where people came to read, that points to a short clip with one interaction, or a longer video with chapters so readers can take only the part they need.

Keep the page fast, findable, and accessible

Page speed

An embed adds weight to the page: the browser loads the player, the interactions, and the video stream. Google's Lighthouse documentation calls a static stand-in that loads the real embed only on click a facade, and the Popout embed works that way. The Responsive embed loads lazily, so the browser waits until the reader scrolls near it, though a video at the top of the post still loads at once. In the video's Settings, under Audio & streaming, keep Streaming set to Adaptive so each reader gets a quality that fits their connection (embed load time help).

Search

Google can find a video in an iframe, but its video features need a watch page, meaning a page whose main purpose is one video. Google's video SEO best practices (updated December 2025) give a blog post that reviews an embedded video as an example of a page that is not a watch page. The post can still rank on its text. If the video itself should appear in video results, give it a page of its own as well. Include SEO metadata adds structured data and a transcript that help search engines understand the video on whichever page carries it. Our comparison of uploading vs embedding a video covers video SEO in more depth.

Accessibility

Upload an SRT or VTT caption file on the video's Captions page, and give each image and hotspot a caption, which screen readers announce. Then test the embedded video with only a keyboard (Tab, Enter, and Space) and with a screen reader. Mindstamp's accessibility features page lists what the player handles by default, such as real buttons and labeled controls.

How to measure what readers do with the video

An embedded interactive video reports more than plays. You can read the results in four places:

• In Mindstamp Reporting, Views lists each session with the watched percentage and the page URL it played on, Interactions lists each answer and click, and Questions breaks down answers by question (reporting help).
• In Google Analytics 4, add your measurement ID under Integrations and the player sends a mindstamp_video_progress event at 10, 25, 50, 75, 90, 95, and 100 percent. Answers, clicks, and lead details stay in Mindstamp. The tag runs inside the player, not on your page, so check it against your consent setup (Google Analytics help).
• In your own page code, on supported plans, the player posts JavaScript events such as video_end and viewer_interaction to the page. You can reveal a hidden next-step section when the video ends (embed events guide).
• From your campaign links, a short script copies the page's URL parameters onto the embed. A parameter such as utm_source becomes a variable you can filter by, and name, email, or custom_id identify the viewer. Keep private data out of URLs that people can see or share (URL parameter help).

Common questions

Do readers need an account to use the interactions?

No. Readers watch and answer in their browser on a computer, phone, or tablet, with no login or app. If you want to know who they are, add lead capture to the video or send them a personalized link (viewer account help).

Will the interactions work if I upload the video file to my own site?

No. Questions, branches, and reports run in the Mindstamp player, so a downloaded source file plays as a normal video with no interactions and records nothing. Embed the player instead (why the interactive version is not a file).

Can I stop other websites from embedding my video?

Yes, on supported plans. Add your sites under Allowed embed domains in account settings. A domain matches only that exact host, so add both example.com and www.example.com if you use both. Other sites then show "Video not available: Code 617". To block the share link as well, turn on Embed only in the video's settings (embed domain help).

Where should the video file live?

Mindstamp can stream a file you upload, play a video you already host on Vimeo, Wistia, JW Player, or Kaltura, or play an MP4 or HLS file from storage you control. Our guide to what self-hosting means compares those options. YouTube links work in Mindstamp for testing only, so replace a YouTube source before you publish.

Does an embedded interactive video work on phones?

Yes. The Responsive embed scales to the column width, and every interaction works in a current mobile browser. iPhones do not support fullscreen for the player, so check that buttons and questions are readable at normal size before you publish (browser and device help).

Start with one post that already gets traffic and explains a process or a product. Add a single question or a booking button at the point where readers decide what to do next, paste the Responsive embed after the paragraph it supports, and compare the Views report with the page's traffic once readers have found it.