A few months ago, I was building an interactive lesson for an EdTech project.
I used H5P a free, open-source tool that lets you create quizzes, interactive videos, and simulations with zero coding.
It worked… mostly.
But then I needed something simple:
“When the user clicks this heading, jump the video to 2:15.”
It felt like it should be trivial.
But H5P said no.
Not with an error.
Not with a warning.
Just… silence.
Because H5P is a black box an iframe you can embed, but not control.
I wasn’t alone.
Hundreds of developers on forums had asked:
“How do I seek to a timestamp in H5P?”
“Can I sync H5P with my React app?”
Most answers were outdated, incomplete, or assumed you were using WordPress.
So I dug in.
What I Discovered
The issue isn’t that H5P is “bad.”
It’s that it was never designed to be extended from the outside.
YouTube videos block external control (due to sandboxing)
The required JavaScript files 404 on public CDNs
And H5PIntegration? It only works if you load H5P a very specific way
After testing MP4 vs YouTube, reverse-engineering message flows, and building a custom bridge, I found a reliable pattern that works in production—without WordPress, without jQuery, and without magic.
Why I Wrote a Guide
I could’ve just dropped a gist.
But I knew others were stuck like I was.
So I documented the whole journey:
The debugging logs
The architecture decisions
The “why” behind each workaround
And how to embed it cleanly in Next.js, React, or any modern frontend
Not as a tutorial.
As a field report from the trenches.
I call it:
Breaking The H5P Black Box Guide
It’s for developers who:
Believe interactive content should be controllable, not just “clickable”
Are tired of tools that “work” until you need them to do more
Ship alone, with no team, no mentor—just stubborn curiosity
📚 Check out: https://komalll.gumroad.com/l/komal-niaziiii
Final Thought
Open-source tools like H5P empower millions.
But empowerment shouldn’t stop at “you can create.”
It should include: you can extend, you can integrate, you can make it yours.
That’s the gap I tried to bridge.
If it saves you even one all-nighter, I’ve done my job.
Final Note
Open-source tools like H5P are gifts.
But gifts shouldn’t come in locked boxes.
If this saves you one week of debugging, I’ve done my job.
—
Komal
Frontend Dev | Pakistan
Top comments (1)
Sorry, but I think you're misjudging H5P. While it is true that most H5P content types run in an iframe, this is only an issue if you're running H5P on a remote server. If it runs on your platform, you can access the iframe, of course. But more importantly, H5P can be extended from the outside via different hooks, and those are mentioned in the official developer guide under "Customize and Extend".
I am the first to agree that the documentation is not perfect (by far), but if you're trying to run H5P via next.js, you're essentially creating a whole new H5P integration and likely even porting parts of H5P core which goes far beyond customizing a content type in an iframe - but has been done for node.js, too.
So, while appreciating that you documented your journey, I really resent you portraying yourself as some sort of hero and putting H5P into a corner that it does not belong to. And putting a price tag onto your guide even makes things worse.