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:
- Office365 / Onedrive files (.doc/.xls/.ppt/MS Forms)
How to create an iframe
Navigate to your course, in the green navigation bar,
- Click on Content
On the Content homepage,
- 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,
- Enter a Title
- Click on the three dots in the upper right corner
More options will appear,
- Click on </> (Source Code)
The Source Code will open as a pop-up window,
Locate the desired position of the iframe, and
- Enter the following text <iframe></iframe>
- Click on Save
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
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">)
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>
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!