Home / Iframe

Iframe

IFrame (Inline Frame) is a piece of HTML code that creates a frame or window within an HTML page to display content from another URL.

In LMS, it is a good way to display content such as:

  • calendars from external sites such as Google Calendar, Microsoft Outlook web calendars, Apple MobileMe calendars, etc.
  • web pages with current content: e.g. weather
  • content from network locations outside the current LMS course e.g. another LMS course, a network file of the HTML page
  • content from sites that deliver content through iFrames such as Google Picasa web albums, youtube, etc.

NOTE: Screen widths are often 1200 pixels wide so an iFrame up to 1000 pixels is often fine.

The size of the IFrame can be specified in the surrounding HTML page so that the surrounding page can already be presented in the browser while the IFrame is still being loaded. The IFrame behaves much like an inline image and the user can scroll it out of view. On the other hand, the IFrame can contain its own scroll bar, independent of the surrounding page’s scrollbar.

For security reasons, LMS just does not allow you to use iframes everywhere. In general, iframe code is not allowed in LMS activities to which all class members can contribute, including Assignment submissions, Wiki, Forum, Database, Glossary, and Blog activities. In these activities, iframe-embedded video displays in the HTML editor, but will be stripped out when posts or submissions are saved.

Caution: not all browsers recognize the IFrame. However, Mozilla Firefox, Opera and Microsoft Internet Explorer introduced contentEditable and designMode, which enables users to edit the contents of the HTML contained in an iframe. Popular web applications that make use of this feature including Google Docs & Spreadsheets (formerly Writely), JotSpot Live and Windows Live Hotmail to name a few.

Note: many websites do not allow their pages to be rendered in an iframe (This is mediated via an X-Frame-Options HTTP response header [1]).
There are websites (you can google this) that will check whether your target web address will allow iframe functionality.

Code example

To create an iframe,

  • edit a section header, label, web page or forum post
  • turn on the HTML code display
  • paste the following code somewhere
<iframe height=”600″ width=”900″ src=”https://docs.paradisolms.net”> Your browser does not display iFrames</iframe>

The following example creates a scrollable window 300 by 600 pixels and opens up Adobe Reader and the file inside it.

<iframe height=”300″ width=”600″ src=”http://demo.paradisolms.net/file.php/2/Media_examples /WQ3.pdf”> Alternative text for browsers that do not understand IFrames </iframe>

Example use

Here is an example of how to insert a PDF file into an assignment using Iframe.

  1. Within your course, upload the PDF into your course files area
  2. Once you’ve done that click on the file and note its URL address in the browser address bar.
    1. Tip: copy the URL from the browser window, pop it into Notepad. Or open a second browser window and find the pdf file, copy the URL address from that window into the window you have open with the code.
  3. Create a new Assignment (Online Text)
  4. For the description, change the view to HTML view in the editor, and embed the HTML code for an iframe that points to the PDF URL you noted in step 2.
  5. Change back to WYSIWYG mode and add your question underneath the newly displayed iframe
  6. Save, and that should now let your users view the scrollable PDF in the same window as the one they’ll be entering their response into.

This produced:

Iframe example showing scrollbars in a user view

Google Drive Embedding

Google Docs is a free service from Google which allows you to manage and store your documents online. If you’d like your site viewers to view them through your site, you can copy the embed code of the document and place it in an “HTML section”. This is also applicable to other Google Drive services such as Google Sheets, Google Slides, etc.

The following things can be Embedd from Google Drive.

  1. Document Embedding

  2. Video Embedding

Example use

This can be done by following these steps:

1) Document Embedding

  1.  Set your document’s privacy to the public so your site viewers would see it. You can do that by clicking the “Share” button at the top right corner of the document page.
  2. Open a file in Google Docs, Sheets, or Slides. At the top, click File and then Publish to the web.
  3. Click on Embed and copy the HTML in the text box.
  4. Goto the course section click on a topic while adding/edit activity and try to paste the code.

2) Video Embedding

If your preference is to grab an embed code please follow the below steps:

  1. Open Google Drive
  2. Find the Video file
  3. Set Share Setting to Public on Web
  4. Click to Open in iFrame
  5. Click the “More Actions” icon (3 vertical Dots) upper right corner
  6. Select “Open in New Window”
  7. Click “More Actions” and Select Embed Code
  8. Copy Embed Code from the textbox
  9. Goto the course section click on a topic while adding/edit activity and try to paste the code.

The following is the example presented for the same.

 

The following screenshot shows the view for Google doc embed in PLMS Courses

This produced the result below:
Google document example showing in a user view embed in Activity.
➤