Embed a project so it plays, interactive, on a website

[conzolom58623008]

Hello,

I understand that I might be using the term "embed" wrong, but what I mean is I want the interactive project to play on a website without launching in a new tab or window. I know that I need to host the project on a server. Assuming I do that (so I have a link to the project) how do I embed it? I'm new to all of this, so I'm not sure where to get started.  I see things like "iFrame" come up when searching online, but is that an old way of doing this or would that still work? And related, do you recommend a site for this, like Wordpress... Sqaurespace? Would it work on Google Sites?

I have searched the forums and the only post I found close to this wasn't really answered.

Thanks,

Conzolo

[Erik Lord]

When you publish a Captivate project as HTML5-only you'll end up with a folder that contains a few subfolders and files.

One of those files will be 'index.html'.

Upload that entire folder to your website, navigate to the URL + folder + index.html

like: https://www.mysite.com/published-folder/index.html

There! Your project shows up 'embedded' in that HTML document.

However, if you're looking to embed that index.html > CP project piece into another webpage (i.e. WordPress) then, yes, the iframe method is likely to be most manageable for you. As you have, you can read up on iframes everywhere...the overall idea being you create a defined 'frame' within the parent webpage that loads in another HTML document (i.e. your CP index.html).

There are downsides, however.

-iframes aren't very 'accessible', meaning they're not very friendly to those with disabilities (i.e. text to speech software can have trouble reading the text within).

-iframes don't scale well to various screensizes - so what may look good on a desktop will likely not look good on a mobile device.

There are ways to compensate for those issues, it just takes reading and understanding of how to code those items...and perhaps they're not significant concerns for your delivery.

How you host depends on your needs. If you want a large, custom, lots-of-content site with various CP projects scattered and embedded within, something like WordPress should work well (I've not used Square, Wix, or Google Sites).

However if you don't need a large site and aren't delivering for cross-device, accessibility, etc, it may be better if you don't use software like that and just do it the old-fashioned way and hand-code your sites (or use Dreamweaver, etc). Of course, that takes a lot more learning...

[conzolom58623008]

Ok, great. Thanks for the help!

One question on your explanation. Assume I use Wordpress - you mean upload to my server, right? And then I link using the example you gave and it point to that, right? From what I understand I can't upload to the webpage... the project needs to "live" somewhere else (I think bluehost would be an example of where I could store it, no?).

Right now I'm still learning all of this so there's a great chance I'm missing the basic way this all works. I think what I did the other day was create a wordpress site and used my personal computer as the server, with the understanding that if I were to publish this I'd have to host it somewhere. So maybe that's what you mean? The same place I host the wordpress site I would upload the project.

Thank you for your time!

[Erik Lord · Accepted solution]

Ideally, if you have a webhots like BlueHost, you also have FTP access to your website.

It would likely be far easier to upload your published CP folder to your site via FTP than trying to do it through the WP admin area.

Of course, then you have to understand and use FTP...but if you're wanting to understand how the web works (HTML, iframes, hosting, etc.) that's a pretty important piece to know anyway.

So upload your published CP folder to your website (likely in the 'public_html' folder) via FTP.

Understand how to then access it via your domain name (i.e. https://www.mysite.com/published-folder/index.html)

[that is, of course, just an example URL]

Then figure out how to generate an iframe on a page using WP...and point the source ('src') of that iframe to the URL that loads your CP project.

Easy Peasy

[conzolom58623008]

Thank you!

[Lilybiri]

Have a look at this blog post on my site:

Force First View (micro-navigation) - Captivate blog

It is just an example of an embedded interactive movie. I published that movie to my domain, and embedded the URL in an iFrame with the proper settings for size. The interactive movie was published as rescalable HTML, can also be watched using a direct link, and will rescale to the screen resoljution=. Here is another example, this time not embedded:

Captivate's Timeline

[conzolom58623008]

Yes, that first example is what I want to do. I don't know how to code, but I'm guessing I can figure out how to use the iFrame. It needs to be scaleable for different size computers, but it doesn't need to work on smartphones.

Thanks for your help!

[Lilybiri]

I am not using WordPress, have tried it out and did read a lot of complaints on this forum that it is difficult to embed a published CP-project. Sorry, cannot help with WP.

[conzolom58623008]

Ok, thanks. If not Wordpress, is there something else you recommend. I looked at your site... post haven, you have better luck with that or would I need to know more coding to use that? (That is, more than zero.... I can read it a bit, like to resize things - and I've had to use FTP that Erik mentioned for something else I was working on).

Should I be starting a different thread to ask for this recommendation about which website to use?

Thank you!

[Erik Lord]

I'd say what site/hosting software you use for your website should depend on a lot of other requirements other than how easy it is to create an iframe... Cost, host, customizations, accessibility, responsiveness, free-from-ads, etc.

Overall, a WP-based site is probably a good solution but it depends on what you want to create (and the above such requirements).

With a hosting company like BlueHost, they probably offer straightforward webhosting (i.e. upload your HTML via FTP and done), or you can install software like WordPress via CPanel (right?). If you just want a basic website, use Dreamweaver, create your own site, and upload.

If you want a lot of the features WP offers, install it and give it a go. If you don't like it, remove it from your site via CPanel.

A nice thing about WP is it offers a ton of free and paid templates and free/paid plugins. Surely there's one to create an iframe if you need the help:

https://www.google.com/search?q=wordpress%2C+show+page+in+iframe

[conzolom58623008]

Thanks so much for your help!!!

[Erik Lord]

That's a great iframe implementation, Lieve. Do you know what is dynamically resizing the iframe with the browser window size? I assume a JS function somewhere? I'd love to figure out how to do that....