How to use iframes in Brightspace

When using HTML pages, a very versatile tool can be iframes. These allow for different types of content (including from other web pages) to be shown within a single page. This manual will assume the creation of an iframe in a new file page, but it can also be applied to an existing one.

This manual will show how to:

Useful frames:

  • Office365 / Onedrive files (.doc/.xls/.ppt/MS Forms)
  • Youtube
  • Prezi

How to create an iframe

Navigate to your course, in the green navigation bar,

  1. Click on Content

 

Navigate to your course > in the green navigation bar > click on Content

On the Content homepage,

  1. Select a (sub)module
  2. Click on Upload/Create, a drop-down menu will appear,
  3. Click on Create a File 
Content area > select a (sub)module > click on Upload/Create > a drop-down menu will appear > click on Create a file

Create a File homepage will open,

  1. Enter a Title
  2. Click on the three dots in the upper right corner
The create a file homepage will open > enter a title > click on the three dots in the upper right corner

More options will appear,

  1. Click on </> (Source Code)
More options will appear > click on </> (Source Code)

The Source Code will open as a pop-up window,

Source Code pop-up

Locate the desired position of the iframe, and

  1. Enter the following text <iframe></iframe>
  2. Click on Save
Source code > enter the following code <iframe></iframe>

The pop-up window will close. The empty iframe will appear in the text box of the Editor

This can be filled with content in the HTML editor again by entering strings between the <iframe> </iframe>. For more information, please visit the following links: Iframe attributes, Source and Height and Width

An empty iframe will appear in the text Editor box
Iframe attributes

Attributes are specific terms used in HTML to provide extra information or functionality to an element. Examples of this can be specific dimensions, shapes, etc.

Attributes that affect the iframe itself are placed within the first iframe statement  (e.g. when using a source statement, <iframe> will become <iframe src="url">)

Source

The src attribute specifies the URL (web address) of the object in the iframe.
For example,  <iframe src="https://wur.nl/en/library.htm"></iframe> will create an iframe in which (theoretically) the library page of Wageningen University will be shown.

  • Not all pages can be included. Both the target website must be linked externally, and the site should be listed as a valid target for Brightspace. The examples where the Library page is used are merely examples, when used they will show a 'refused to connect' message.
  • The target should be a valid object, such as a .htm(l) file, an image (.jpg, .png, etc.), etc.

Code example: <iframe src="https://wur.nl/en/library.htm"></iframe>

Height and Width

Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default, for example, width="300".
A relative term can also be used, for example, width="100%" will create a width-filling iframe.

The height will vary, and setting a relative % will not always get good results. Setting Width to 100% and the Height to ~700 will usually give a good presentation in Brightspace on a normal 1920x1080 full HD screen.

Code example: <iframe width="100%" height="700"></iframe>

.

You now know how to use iframes in Brightspace!

Want to know more about the Editor in Brightspace?

Please visit: