Issue embedding a Hype Document in an Iframe (Wordpress)

Hi there, i’m having trouble embedding my Hype document to a wordpress post and i want to try as an iframe instead - however, i can’t load your example image (see picture). Do you mind giving an example of how the code should be with an iframe?

Thanks
Jacob, Copenhagen, Denmark

Hi Jacob,

<iframe src="http://url goes here/" width="width of document" height="height of document"></iframe>

This is the code you need to place in your iframe to load your document. Your url is wherever you placed your document. So for example if you placed your code in your uploads folder your iframe would look something like this

<iframe src="http://site.com/wp-content/uploads/2014/HypeDocument.html" width="600px" height="400px"></iframe>

**Don’t forget as Daniel said if your site is responsive then the width and height should be percentages not actual amounts in pixels.

Hi @DBear, thx for your reply.

Should i write the code text in the post like this:

<div id="hus3_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite">
		<iframe src="http://xn--detndbarehus-vcb.dk/public_html/wp-content/uploads/2015/07/hus3.hyperesources/hus3_hype_generated_script.js" height="100%" width="100%"
 </iframe>

	</div>

OR just:

<iframe src="http://xn--detndbarehus-vcb.dk/public_html/wp-content/uploads/2015/07/hus3.hyperesources/hus3_hype_generated_script.js" height="100%" width="100%"
 </iframe>

Hi Jacob,

Don’t use the script.js file use the html file that was uploaded. An iframe embeds HTML within another HTML page. So,

<iframe src="http://xn--detndbarehus-vcb.dk/wp-content/uploads/2015/07/hus3.html" height="100%" width="100%"></iframe>

Also don’t include /public_html/ in your url.

I’m assuming hus3.html exists. :slight_smile: but whatever your html file is then just put it there and yes place this code in your text editor wherever you want the document to appear.

D

Thx DBear - first breaktrough: For the first time it loads the document from the library, probably because i’ve included /public_html/ all the time.

However, all the functions in the document are not loading. Only the main image. This is going to be a long day :slight_smile:

Make sure you edit the document html and put in the absolute url to the script file.

D

@DBear i tried but it won’t load it.

Anyway, my goal is to implement my Hype document at the frontpage of the website. It’s an image of a house, where you can click on videoimages, which jumps to a scene where a video plays.

I guess the best thing would be to put the code in the theme editor in stead of a page, when i want it to load at the frontpage of the website, right?

right :wink:

Don’t forget when you export your document from Hype you have a HTML file and a resources folder with the scripts. Inside the HTML file there is a relative url reference to the script file but if you separate these files or place them within Wordpress it’s best to change the url to an absolute one (with http://) at the beginning. This way the HTML file will always know where the script file is. I hope you can understand that :smile:

I believe Daniel’s video above goes into that.

D

1 Like

This is definitely an option, but you could also set a 'Post' as your Front Page, and place your Hype document there: Create a static front page – Documentation – WordPress.org

Either way, the iframe code would be the same.

Hi @Daniel, Hype is a great invention. I enjoy learning how to use it for many future projects.

I can’t get the video to play online - even though i uploaded both .mp4 .ogg and .webm and direct the src to the upload folder. It works in my offline browser.

Here is my project: www.detåndbarehus.dk - the green video image in the window of the house points to a .mp4 video in the next scene. But it won’t start.

(The green videoimage to the bottom right points to a scene with the same video in youtube. Youtube works)

I activated “Start timeline -> main timeline” on Layout load, so should start by itself…

Any ideas? I really want to avoid linking to Youtube.

huset_hype_generated_script.js.zip (2.8 KB)
Huset.html.zip (1.1 KB)