Skip to main content
U
user370955456
Inspiring
July 7, 2017
Answered

Possible to Embed Local <iframe>?

  • July 7, 2017
  • 3 replies
  • 4362 views

I know I can insert iframes by clicking Object -> Web, and then instead of "Address" I can choose "Embed code" and paste an iframe.

 

Screen Shot 2017-07-07 at 1.03.28 PM

 

The only problem is that the source of my iframe is being stored locally (i.e. it's not a URL linking to an external webpage), and so the iframe is displaying 404 not found, since it cannot resolve the link.

 

Screen Shot 2017-07-07 at 1.06.16 PM

 

I've tried entering the full path, and I've tried storing the local HTML document in the same directory as the .cptx file, and then simply entering the name of that folder into the src attribute, but all result in 404 not found. I have confirmed that I can successfully create the iframe (in another test web page it works just fine as an embedded iframe).

 

Does anyone know if it's possible to embed local iframes? Will the link break anyway once I publish my Captivate project, and I should find a way of hosting these HTML documents in order to generate a link for them?

This topic has been closed for replies.
Correct answer user370955456

Okay so I figured it out. I think yesterday when I was testing putting my HTML in the wo_4325 directory, and setting the iframe's src="Mountain Lions (Cougars) - p1/index.html" I actually forgot to include the "/index.html" part! Because I just tested it now and it works perfectly.

 

So to reiterate, here's how to get it to work:

  1. Create a slide within Captivate with an iframe.
  2. Set the iframe's src attribute to equal "<your html directory name>/index.html" (in my case "Mountain Lions (Cougars) - p1/index.html")
  3. Publish your captivate project
  4. Open your published project up and navigate to the "wor" directory
    • Within this directory there will be one directory for every iframe within your Captivate project
  5. Put your HTML directory (or single html file, whatever the case may be) into this "wo_<numbers>" directory
    • The "wo<numbers>.html" file is what contains the iframe that will reference your html directory/file

 

Thanks everyone for your help and your suggestions!

3 replies

U
user370955456AuthorCorrect answer
Inspiring
July 11, 2017

Okay so I figured it out. I think yesterday when I was testing putting my HTML in the wo_4325 directory, and setting the iframe's src="Mountain Lions (Cougars) - p1/index.html" I actually forgot to include the "/index.html" part! Because I just tested it now and it works perfectly.

 

So to reiterate, here's how to get it to work:

  1. Create a slide within Captivate with an iframe.
  2. Set the iframe's src attribute to equal "<your html directory name>/index.html" (in my case "Mountain Lions (Cougars) - p1/index.html")
  3. Publish your captivate project
  4. Open your published project up and navigate to the "wor" directory
    • Within this directory there will be one directory for every iframe within your Captivate project
  5. Put your HTML directory (or single html file, whatever the case may be) into this "wo_<numbers>" directory
    • The "wo<numbers>.html" file is what contains the iframe that will reference your html directory/file

 

Thanks everyone for your help and your suggestions!

TLCMediaDesign
TLCMediaDesign
Inspiring
July 11, 2017

Just zip that HTML file and insert as an HTML5 animation. Let Captivate do the work.

U
user370955456Author
Inspiring
July 11, 2017

Thank you. I actually didn't realize you could import HTML simply as a zip. I thought Captivate could only handle .oam

 

However, I tried doing this with my zipped up HTML, and Captivate consistently failed to publish the project. I thought maybe it just had something to do with my HTML being an exported Keynote presentation specifically, but I also tested it with just a very simple index.html page, and it still failed to publish. (Can't even preview..)

TLCMediaDesign
TLCMediaDesign
Inspiring
July 11, 2017

If you are zipping using a Mac that will happen. You need to click on the file and zip and make sure that it is in the root of the zipped folder it creates, not inside another folder which is typical of Macs.

An oam is just a zip file. Inserting as an HTML5 Anmation does everything that you are doing manually but CP does it in 1 step.

Paul Wilson CTDP
Community Expert
Paul Wilson CTDPCommunity Expert
Community Expert
July 9, 2017

Try referencing the name of the file only. Once published drag the files into the published folder or zip file to include them in your eLearning package and this should work. Hope that meets your needs. 

Paul Wilson, CTDP
U
user370955456Author
Inspiring
July 10, 2017

Thanks for this suggestion! I can't see why this wouldn't work, but for some reason it doesn't...

 

I di d conduct a bit of troubleshooting/trial and error. As you can see, I've placed the folder with small HTML page that I want to link in my iframe within the published Captivate project folder. It should be accessible to index.html from here:

Screen Shot 2017-07-10 at 11.01.30 AM

 

However, with the iframe src="Mountain Lions (Cougars) - p1/index.html", it does not load anything.

 

I found out that the HTML files containing the iframes themselves are stored in the wor directory. If you open the wo<bunch of numbers>.html file, you can clearly see the iframe itself, and the src attribute. So I put my Mountain Lions HTML directory in here instead, and if you simply open that wo<bunch of numbers>.html file in a browser, it works! However, if you open the Captivate project from index.html in the root directory, it does not work (for whatever reason)...

Screen Shot 2017-07-10 at 11.13.08 AM

S
sdwarwick
Participating Frequently
July 11, 2017

Try:

src=. /wo_4406/wo<numbers >.html

as the url. 

Note that there is no http://

I would be using the browser debug console to track this issue down 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices