How to Embed an Interactive YouTube Video

To embed an interactive YouTube video, publish the Interakly experience and copy its generated embed code into a host that accepts iframe markup. The iframe loads the complete Interakly viewer, which in turn plays the supported YouTube source and renders compatible interactions at their authored timestamps.

This is different from pasting YouTube's own embed code. A direct YouTube iframe contains the source video, but not Interakly's questions, cards, access flow, response handling, or interaction timeline.

What are you embedding?

The generated code points to an Interakly route in the forminterakly.com/embed/<share-code>. Compatible questions and cards appear as overlays on top of the YouTube video inside that contained player. The rail below the media remains timeline and transport chrome, not a question panel.

Before you copy the embed code

• Finish and save the interactions viewers should receive.
• Preview the complete experience through normal playback.
• Publish the video and test its ordinary Interakly viewer link.
• Confirm the destination accepts custom iframe or embed markup.
• Choose whether embedding should be restricted to approved domains.

Access settings also apply to the embedded viewer. If you require a password, sign-in, email verification, or invitation, make sure the complete gate can be used comfortably inside the host's allocated frame.

Step 1: Publish the Interakly experience

Select Publish in the editor. Interakly validates the saved experience and may block publication when required interaction content or timing is invalid. Resolve those issues before treating the embed as ready.

Embedding does not make a draft public by itself. The /embed/route resolves a published experience; unpublishing removes viewer access from both the ordinary viewer link and existing host-page embeds.

Step 2: Open the share and embed controls

Once published, open the editor toolbar's share area. It contains both the ordinary /v/ viewer link and generated Embed code. Copy the embed code for a page that should contain the player; use the viewer link for a message or button that should open the experience directly.

Step 3: Choose the right embed mode

The labels reflect the generated snippet, not a guarantee about every host editor. Start with Responsive for an ordinary webpage. Use LMS-safe when the destination expects explicit iframe dimensions. Use the narrow option only when the host column is deliberately constrained, then test it there.

Step 4: Add the code to the host page

Step 5: Test the complete embedded experience

Test more than whether the first frame loads. Start playback, approach an interaction through the timeline, submit or dismiss it as intended, and confirm playback continues. Repeat with a later interaction and on a phone-sized viewport.

Restrict embedding to approved domains

In the video's access settings, Allowed domains accepts one hostname per line. When the list is empty, Interakly does not apply a domain allowlist. When it contains domains, the embed route checks the embedding page and blocks an unapproved or unidentified host.

Sizing, aspect ratio, and fullscreen

The generated snippet derives its wrapper and fallback dimensions from Interakly's resolved video aspect ratio. Keep that contract intact so portrait or square media is not stretched into a hard-coded landscape box. When the available column narrows, the contained player fits within it.

The iframe permission list includes fullscreen, and the generated element carries the fullscreen attribute. The embedded player advertises fullscreen only when the browser and host can promote the complete interactive shell through the element Fullscreen API. If that is unavailable or rejected, Interakly does not relabel an iframe-bound enlargement as real fullscreen.

Troubleshooting checklist

FAQ

Does the embed code point directly to YouTube?

No. It points to Interakly's /embed/ viewer route. That experience contains YouTube's embedded player plus the separate Interakly interaction timeline and learner interface.

Do questions appear outside the embedded video?

No. Compatible questions and cards appear as overlays on top of the embedded YouTube video inside the Interakly iframe. The timeline rail below the media is transport chrome, not a question panel.

Which Interakly embed mode should I use?

Use Responsive for ordinary fluid web layouts, LMS-safe when the host expects explicit iframe dimensions, and Vertical mobile or Narrow mobile for a deliberately narrow presentation. Test the generated code in the actual host.

Can I restrict which websites can embed the video?

Yes. Add allowed domains in the video's Embed Restrictions settings. When the list is empty, Interakly does not apply a domain allowlist; when populated, an unapproved or unidentified embedding host is blocked.

Will fullscreen always be available inside an embed?

No. The generated iframe permits fullscreen, but the control appears only when the browser and host can promote the complete interactive player through the element Fullscreen API. Interakly does not present an iframe-bound fake fullscreen as genuine fullscreen.