Embedding Tumult Hype animations with H5P for Wordpress

[Daniel]

While we recommend using the official Hype Wordpress plugin, there are other tools for embedding Hype content:

H5P is a Wordpress plugin that supports a number of interactive content types.

To display a Tumult Hype document, you can use the ‘iframe embedder’ method:

This gives you a width, minimum width, height, and source fields to fill in. If you have a responsive Tumult Hype document, check ‘resize supported’. Make sure you fill in a fixed height (300px), and a percentage-based width (100%).

When you save, you get a quick short code you can use anywhere:

For this example, I can use [h5p id="1"]

… in any post or page to load my iframe which points directly to my Tumult Hype document. Slick.

[michelangelo (Freelancer)]

installed! thanks for the link. nice plugin.

unfortunately I can’t set the iframe height in percentage but this is the same of the hype doc. …a further css media query is required

[PeterS]

I’m new to Wordpress and tying to embed a Hype 3 animation into a post.

My guess is that you uploaded the source file nicaragua.html (with the related .hyperresources folder) to uploads/2016/.

I’m not exactly sure where in the Wordpress interface to upload to such a directory.

[lydialmz (Lydia Lee)]

Amazing! But I’d like to make sure about the “source”.
My site is on the server, first I’ll go to the server file management, upload the html file (or the zip include the “.html” file and “.hypesource”?) . And then fill in the blank with the path of the html file? or the whole zip?
I’m not very clear with it…~~~~

[jonathan (Jonathan Deutsch)]

I don’t think there’s a way to upload a folder of contents within the Wordpress interface; you can use an FTP program to upload it anywhere on your web server. The main point is that the H5P ultimately embeds an iframe pointing to this source, so the source can be anywhere. The original post references the “uploads/2016” folder because it was convenient to keep it with other wordpress content.

So basically as long as you upload the .html and .hyperesources folder somewhere that can be loaded, you’ll be able to use the H5P plugin.

[lydialmz (Lydia Lee)]

OK OK！ I’ll try it now! Thank you very much!

[mikefrost (Michael)]

So once H5P is installed within Wordpress and an interaction is created, is it possible to then export HTML5 as opposed to having it on the H5P site?

[pheraph]

h5p-standalone generates a html file that displays your h5p content without a dedicated h5p site.