In your learning platform, you can embed videos, text, and pages from other websites into specific text boxes for HTML page learning objects, thus making your training material engaging for your users. This article outlines how to embed videos or iFrames from other websites into HTML Page learning objects.
Please note: You can link videos from YouTube, Wistia, and Vimeo as video learning objects without using the HTML page learning object.
Creating an HTML Page Learning Object
Begin by logging into your platform as the Superadmin. Then, access the Admin Menu from the gear icon in the top right corner. Then, in the E-Learning section, click on the Courses item. Now, on the main Courses page, find the course in which you’re wanting to upload a learning object from the list of courses, then press the menu icon in the course’s row. From the dropdown menu, select Training Materials.
You will then be redirected to the course’s Training Materials page. In the top right corner, press the Add Training Materials button. From the dropdown menu, select HTML Page. On the upload page, begin by typing in a title and description into the corresponding text boxes. For the description, you can edit the text as necessary. Now, you can insert videos, photos, or iFrames as desired.
Inserting Videos or Photos into HTML Page Learning Objects
Press the Insert Video button in the markup toolbar at the top of the description text box. In the pop up box, fill out each text box as necessary:
- Source. The video’s URL.
- Alternative Source. An alternative URL for the video.
- Poster. An image that will be displayed before playing the video. It will be the cover image of this learning object. Press the folder icon next to the text box to upload an image. Once you select the image, press Insert.
- Dimensions. You can set your own dimensions for the learning object, if necessary. You can also flag the option to constrain proportions.
Alternatively, you can click on the Embed tab at the top of the pop up box to configure the code of the video. When you’re finished, press the OK button at the bottom of the pop up box. The video will now appear in the description text box for the learning object. You can resize the video using the squares on the corners of the video.
You can then move to the Additional Info tab, where you can insert a short description of the learning object and select a thumbnail. You can also upload a thumbnail, if desired. You can also add tags to your learning object to improve its searchability in your platform’s global search. Some tags may be automatically generated based on the content of your asset, as understood by your platform using artificial intelligence (note that this only works for English content). You can edit or remove tags at any time, with a limit of 15 tags per learning object.
Now, press Save Changes to create the learning object, which will now appear in the list of training materials on the course’s Training Materials page. You can switch to learner view by using the Learner View button in the action bar at the top of the Training Materials page. In the learner view, you can view how your new learning object appears to your users.
Adding iFrames to HTML Page Learning Objects
You can also add iFrames to your HTML Page learning objects, so you can show different web pages inside your courses. Once you’re on the upload page for the learning object, add a title and insert text into the description text box, as necessary.
In order to add an iFrame into the learning object, you must first insert the URL you are planning to include into the Whitelist allowed within your LMS. To do so, access the Admin Menu, then press the Advanced Settings item from the Settings Section. On the Advanced Settings menu, select the E-Learning tab. In the iFrame Whitelist section, type the URL into the corresponding text box, then press Add. It will now be properly displayed in your platform. Please note that Whitelisted URLs do not accept wildcard characters, such placeholder as (*).
Once you’ve added the URL to your Whitelist, you can insert the iframe into your HTML object. In the description box on the upload page for the learning object, choose the Source code icon.
Then, insert the URL between the following tags <iframe src=”http://mydomain.com”></iframe> and replace http://mydomain.com with the URL you want to insert in the iframe. Please remember that the object will be marked as completed when the user closes the page using the ‘X’ close button at the top of the page for the learning object.