How to use HTML in interactive videos: formatting, icons, and embeds

Where HTML works in a Mindstamp video

A text interaction is one kind of video overlay: a box you place on the frame, with show and hide times on the timeline. It has the full HTML editor, which every Mindstamp plan includes. Several other fields show simple HTML that you type straight into them.

Where Mindstamp shows HTML (from the Mindstamp Help Center and the app, October 2026)

Place	How you add HTML	Good for
Text interaction on the video	Edit as HTML, with Insert Icon and a live preview	Callouts, formatted steps, icons, embedded tools
Text in the Magic Menu or a custom End Screen	The same editor	A formatted resource list or a closing summary
Button labels	Type simple HTML in the button text	An icon before the label, a line break
Question prompts and the Lead Capture prompt	Type simple HTML in the prompt	A bold key term, a second line
Show Message click action	Type simple HTML in the message	A short formatted note that pauses the video

The HTML help article covers the same ground in short form. The HTML editor and icon picker shipped on April 3, 2026, so older screenshots of an "Edit in HTML" button show a previous version of the editor.

How to add HTML to a text interaction

1. Add a text interaction at the moment it should appear, or select one on the timeline.
2. On the Content tab, select the code icon next to the text box. Its label is Edit as HTML.
3. Type or paste your HTML in the Content box. To add an icon, select Insert Icon and pick one. Mindstamp places a Font Awesome icon tag at your cursor.
4. Read the Preview beside the editor. It runs the same cleanup as the player, so anything that disappears from the preview will not reach viewers either. Select Continue.
5. Drag the edges of the interaction on the video until the content fits, and set its Show and Hide times.
6. Choose a Click Action. Use None for a label or an embedded tool. Use an action such as Open Link or Change Time when the whole callout should work as a button.
7. Save, then play the video from the share link in a private browser window, once on a computer and once on a phone.

Every click action that a button can run also works on a text interaction, so a formatted callout can jump, branch, or start a download. Our guide to what a video button can do walks through each action.

Which HTML tags Mindstamp keeps

Mindstamp cleans HTML before it shows it, which stops one interaction from breaking the player or the page around it. We checked the list below against the player code in October 2026. The third column shows what the player changes when it displays your HTML. Your saved code stays as you typed it.

HTML that survives in Mindstamp text, buttons, and messages (checked October 2026)

To do this	Use	What Mindstamp changes
Title a callout	h1 to h6	Nothing
Group or break lines	p, div, span, br	Nothing
Mark key words	strong, b, em, i	Removes u and mark
List steps	ul or ol, with li	Nothing
Set color, size, or alignment	A style attribute on p, div, or span	Drops the whole style attribute if it contains position: fixed, z-index, width: 100vw, or height: 100vh
Add an icon	i with Font Awesome classes, from Insert Icon	Nothing
Show a picture	img with src, alt, width, height	Nothing
Link to a page	a with href, plus target="_blank" to open a new tab	Adds rel="noopener noreferrer" to a link that opens a new tab or window. A link with no target opens in the player's own frame and replaces the video
Embed another tool	iframe with src, title, width, height, allow, allowfullscreen, frameborder	Removes loading and referrerpolicy

Everything else is removed, including script, form fields, button, table, video, audio, and event attributes such as onclick. The player also removes every <style> block, wherever it sits in the content, so put styles in the style attribute of each element.

For links, use the interaction's Open Link click action where you can: it opens a new tab by default, pauses the video, and records the click. If you write an a tag instead, add target="_blank" so the page opens in a new tab and the video stays in place. For a picture that carries information, give the img an alt attribute that describes it, or add an image interaction with a caption, which the player uses as the image's alt text.

HTML examples you can copy

Each example below uses only tags Mindstamp keeps. Paste one into Edit as HTML, then change the words and colors.

A callout with a heading and two steps

<div style="background: rgba(0, 0, 0, 0.75); padding: 0.75em; border-radius: 8px"> <h2>Before you continue</h2> <ul> <li><strong>Step 1:</strong> Save your work.</li> <li><strong>Step 2:</strong> Review the checklist.</li> </ul>
</div>

The dark fill keeps light text readable over any frame of the video.

One line with an icon and a required word

<p style="text-align: left; font-size: 1.25em"> <i class="fa-solid fa-circle-info"></i> <strong>Required:</strong> manager approval.
</p>

The word "Required" is bold, so the meaning does not depend on color.

A personalized greeting

<h2>Welcome, {{NAME|there}}</h2>
<p>This video covers the three changes to your account.</p>

Placeholders work inside HTML. The viewer sees their own name. If none is stored, they see the fallback after the bar, "there". Personalization variables are available on supported plans.

An embedded map

<iframe src="https://www.google.com/maps/embed?pb=PASTE-YOUR-CODE" title="Store locations map" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>

To get the code, open the place in Google Maps, open the menu, and select Share or embed map, then Embed a map and Copy HTML (Google Maps Help). Keep the src and the attributes above, and write a title that names your map. Mindstamp drops the rest. Because the width and height are 100%, you size the map by resizing the interaction on the video.

Embed a form, map, or scheduler in the video

Mindstamp can show another tool inside the video if that tool gives you iframe embed code. Embed codes that rely on a script tag do not work, because scripts are removed, so ask the tool for its iframe version. The other site must also allow its page to load in a frame. Sites control this with the X-Frame-Options header or the frame-ancestors directive, and a page that refuses frames shows up as an empty box.

A text interaction is one of three ways to bring another tool into the video. Pick by how long the viewer needs it.

Three ways to show another tool in a Mindstamp video

Method	What the viewer sees	Use it when
Text interaction with an iframe	The tool sits in a box on the video during the times you set	The viewer needs it for a few seconds or while the video plays, such as a map or an audio player
Open Link Modal click action	The page opens in a window over the player. The video pauses and continues when the window closes.	The viewer needs time, such as a booking calendar, a long form, or a calculator
Open Link click action	The page opens in a new tab	The site refuses frames, or the task belongs outside the video, such as checkout

Our help article on embedding a booking calendar shows the modal method step by step.

What Mindstamp records around an embed

Mindstamp records clicks and answers on its own interactions. It cannot see inside another site's frame, so anything a viewer types into an embedded form stays in the tool that owns the form. To connect the two records, ask for the viewer's details with lead capture before the embed appears. If the form tool can fill in fields from its link, add a placeholder such as {{EMAIL}} to the src. Mindstamp inserts the value as stored and does not URL-encode it inside HTML, so test with a real email address before you share the video.

Make HTML readable for every viewer

• Put text on a background. The video behind a callout changes from frame to frame, so give the container a solid or semi-transparent fill. WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
• Name every embed. Give each iframe a title attribute, such as title="Store locations map". Screen readers use it to name the frame (W3C technique H64).
• Use structure for meaning. A heading, a list, and a bold word tell every viewer what matters. Do not rely on color alone.
• Set brand colors in Design first. HTML styles do not change when you update your Design colors later, so keep custom HTML to a few patterns you reuse. The styling help article shows which controls cover what.
• Size with em and percentages. Fixed pixel sizes can overflow a phone screen, where the player is much smaller than in the editor. Check each video on a phone, held upright and turned sideways.

The accessibility help article lists what the player handles for you, such as keyboard support for buttons and hotspots.

Interactive HTML5 video: what it takes to build one by hand

An interactive HTML5 video is a video played by the browser's video element, with HTML elements on top that react to the playback time or to clicks. You can build a basic one yourself. This page code shows a button from 0:12 to 0:20 and pauses the video when someone clicks it.

<div class="player"> <video id="tour" src="product-tour.mp4" controls playsinline></video> <button id="cta" class="overlay" hidden>See pricing</button>
</div> <style> .player { position: relative; } .player video { display: block; width: 100%; } .overlay { position: absolute; right: 5%; bottom: 20%; }
</style> <script> const video = document.getElementById('tour'); const cta = document.getElementById('cta'); // Show the button from 0:12 to 0:20 video.addEventListener('timeupdate', () => { const t = video.currentTime; cta.hidden = t < 12 || t >= 20; }); cta.addEventListener('click', () => { video.pause(); window.open('/pricing', '_blank'); });
</script>

The browser fires the timeupdate event about 4 to 66 times a second, depending on system load, which is close enough for a button. The prototype is the quick part. Two gaps show up once real viewers arrive:

• The code stores nothing. To learn who clicked, you would add an event for each click, a way to identify the viewer, and a report.
• Fullscreen hides the button. When a viewer makes the video element fullscreen, the browser shows the video alone. Keeping the overlay means making the container fullscreen with the Fullscreen API, which MDN's compatibility data lists as available on iPad but not on iPhone (checked October 2026).

After launch, each new label or time is a code edit and a site release.

In Mindstamp, you place interactions on a timeline over the video you already have, and each click and answer is recorded against the viewer. On iPhone, the player hides its fullscreen button so interactions stay on screen. Our guide on how to create an interactive video walks through a first build.

Common questions

Can I add JavaScript to a Mindstamp interaction?

No. Mindstamp removes script tags and event attributes such as onclick. To react to the video from your own web page, embed the player and listen for its JavaScript events, such as video_end and viewer_interaction. Player events are on Core and higher plans.

How do I add a video to my website with HTML?

That is a different job: you need embed code, either a video tag for a file you host or an iframe from a video platform. Our guide on how to embed a video with HTML covers both. For a Mindstamp video, copy the responsive embed code from the video's Share page.

Why does my embedded form show an empty box?

Either the site refuses to load in a frame, or the embed code needs a script tag. Ask the tool for an iframe embed. If it has none, use the Open Link click action, which opens the page in a new tab.

Why does part of my HTML not show in the video?

The tag or attribute is not on the allowed list in the table above. Check the Preview in the HTML editor, which shows what viewers will see.

Can a text interaction start a file download?

Yes. Give it the Download File click action, which is on Pro and higher plans. A formatted callout with a download icon works well for a checklist or slide deck. Our list of documents worth offering as downloads covers which files to offer and where. For links and files that should stay available for the whole video, use the Magic Menu.

Start with one callout. Add a text interaction at the moment viewers need a reminder, paste the first example above, change the words, and check it on a phone. To see HTML in a published video, open the accessible HTML callout example or browse more interactive video examples.