Skip to McMaster Navigation Skip to Site Navigation Skip to main content
McMaster logo

H5P and Avenue to Learn

Embedding H5P Content on Avenue to Learn

Now that you have created some content, the last step is to learn how to embed that content into your Avenue to Learn course shell!

Step 1: Find the Embed Code on H5P

Once you have created your content piece, and saved it, you can view the content piece.

At the bottom of the content piece, above “Save to my Favourites,” you’ll see two buttons, “< > Reuse” and “Embed.” Click “< > “Embed”.

Screencapture image from H5P module showing the embed button circled in red.

Screencapture image from H5P module showing the embed iframe code.

A small box titled “Embed” will appear on the screen. Copy the Embed code that shows up on your screen, ensuring you have both the beginning < and ending >. If you wish, you can alter the dimensions by changing the numbers in the box, making the content piece bigger or smaller depending on your needs.

Step 2: Pasting the Embed Code in Avenue to Learn

Create a new file in Avenue to Learn by navigating to your course shell.

Select the Content tab, and then select the correct module in the left-hand column which has the Table of Contents.

Once the module opens in the main column beside the Table of Contents, open the dark blue Upload/Create drop-down menu underneath the module title, and select “Create a File.”

Screencapture image from Avenue showing the upload and create file menu.

Format the new file as you wish. Then, when you have selected the place you wish to add your H5P content, use the “Insert Stuff” button, which includes a play button in the top left corner, a pause button in the top right corner, acircle in the bottom left corner, and a square in the bottom right corner.

From the “Insert Stuff” menu that appears, select “Enter Embed Code” and paste the embed code from H5P.

Screencapture image from Avenue showing the 'insert stuff' menu with the 'enter embed code' option selected.