Embed TrainingOS SCORM in plain HTML

When plain HTML is the right fit

Static sites, internal handbooks, documentation portals, and intranet pages often need nothing more than a link or a single iframe. You control the markup; TrainingOS hosts the SCORM package.

Confirm your TrainingOS URL works when pasted into the address bar before you wire any HTML—debugging is faster when the player is known-good in isolation.

Prerequisites

Host your parent page over HTTPS if your TrainingOS URL is HTTPS—avoid mixed content that blocks scripts or iframes.

Know your deployment target: some internal portals inject Content-Security-Policy headers that restrict iframe origins; you may need IT to allow TrainingOS domains.

Option A: Direct link

The simplest integration is an anchor: <a href="YOUR_TRAININGOS_URL" target="_blank" rel="noopener noreferrer">Launch module</a>. This pattern avoids many cross-origin iframe issues and matches how many LMSs launch content in a dedicated window.

rel="noopener" (and noreferrer when you want stricter referrer privacy) is important for target="_blank" links to avoid tab-nabbing and to follow security best practices.

Option B: iframe snippet

Use a standard iframe with src set to your hosted launch URL, style or attribute width="100%", and a fixed height tall enough for your player—often 600–800px depending on chrome and aspect ratio.

Add allow="fullscreen" when your authoring tool or player uses fullscreen APIs. Test on the same domain policy you will use in production.

If the parent page is on a different site than the player, verify SCORM behavior: some packages assume a top-level window for completion or bookmarking; if tracking is flaky in iframe, switch to the link pattern.

Link vs iframe in static HTML

Prefer a link when you want the fewest moving parts: no iframe height tuning, fewer CSP headaches, and a familiar full-window experience for learners.

Prefer an iframe when you need the module visually embedded in a long article or documentation page and you have validated CSP and height on real devices.

Security, HTTPS, and mixed content

Serve your HTML over HTTPS to avoid mixed-content warnings when embedding HTTPS resources. Browsers may block insecure parent pages from loading secure iframes in predictable ways.

Test in Chrome and Safari with third-party cookies restricted; some learners use strict privacy settings that affect session behavior inside iframes.

Checklist

Validate HTML in a staging environment, then run an incognito test against production URLs.

If you use a static site generator, ensure the iframe is not escaped or stripped by markdown processors—use raw HTML blocks where appropriate.

Troubleshooting

Blank iframe: confirm the src URL in a new tab, inspect the console for X-Frame-Options or CSP frame-ancestors errors, and adjust headers or use a link instead.

Completion not reported: many SCORM packages are designed for LMS launch; in a bare iframe, confirm whether your expectations match how the player was published.