Extending Lectora with an iFrame

By Joseph Suarez

What’s an iFrame? While it may sound like the next must-have device from Apple, you won’t see a line forming around the block for it anytime soon. That’s because it’s just some useful code capable of extending the functionality of your Lectora-built eLearning course.

An iFrame is an HTML element that allows you to place a page within a page. You can even nest iFrames within iFrames to have a page within a page within a page. Fortunately, it’s not as confusing as Inception. In fact, if you’ve recently copied the code to embed a YouTube video, you’ve already used an iFrame.

And don’t worry; unlike its neglected cousin the <frame> tag, iFrames are fully supported in HTML5 and here to stay. This means anytime you need to pull content from an external source into your Lectora course, an iFrame is a simple and safe solution. Some handy uses for iFrames in Lectora pages include:

• Inserting a YouTube video
• Embedding a PDF
• Integrating Google Docs
• Enabling scrollbars on a large image.
• Including a narration transcript
• Pulling in a large body of text (such as a company policy).

So how do you add one yourself? Within Lectora, you’ll need to add an External HTML Object to the desired page. This will display as a weird placeholder box while you’re working in Lectora (and in Preview Mode), but will display correctly once the course is published and viewed in a web browser. In the new External HTML Object’s properties, set the Object Type to “Other” and add your code.

In the case of YouTube, Google Docs, or some other user-friendly external site, the code will be generated for you to copy and paste. Otherwise, you’ll need to do a little bit of hand coding. Start and end with the opening and closing tags (<iframe> & </iframe>). Then within the opening tag, you add the source of the external content, height, width, etc. Check out this helpful site for more detail.

Example:
<iframe src=" http://integratedlearningservices.com" width="780" height="400" frameborder="0"></iframe>

If you’ve published your course and received an error message of some kind, chances are your code has a syntax error or the URL to the external content isn’t valid. Simply tweak your code and try again. The amazing possibilities of iFrames in Lectora are too numerous to let a little code debugging stop you!