Embedding an H5P Activity in a Canvas Page
Julie Maier
8 steps
38 seconds
Instructure
Usask
1
You will need to locate the H5P activity you wish to share first. In the bar at the bottom of the H5P activity, click **"Embed"**.
2
Select and **copy** all of the text in the **"embed code"** field.
3
You now have the "embed code" or "iframe code" on your clipboard. Next, navigate to the **page in Canvas** where you want to embed the H5P activity.\ \ Once you're at the page, click **"Edit"**.
4
On the bottom of the editor window, click the **"</>"** button to switch to the **HTML editor**.
5
In the HTML editor, **paste the "embed code"** or "iframe code" that you copied earier.
6
If you wish to, you can click the **"</>"** button again to switch back to the **regular rich content editor**, and get a visual check that the embed is working.
7
Click **"Save"** to complete your edits on the page.
8
You're done! You can now test the H5P activity, and show it to students along with other page/module content.
Embedding an H5P Activity in a Canvas Page
Julie Maier
8 steps
38 seconds
Instructure
Usask
1
You will need to locate the H5P activity you wish to share first. In the bar at the bottom of the H5P activity, click **"Embed"**.
2
Select and **copy** all of the text in the **"embed code"** field.
3
You now have the "embed code" or "iframe code" on your clipboard. Next, navigate to the **page in Canvas** where you want to embed the H5P activity.\ \ Once you're at the page, click **"Edit"**.
4
On the bottom of the editor window, click the **"</>"** button to switch to the **HTML editor**.
5
In the HTML editor, **paste the "embed code"** or "iframe code" that you copied earier.
6
If you wish to, you can click the **"</>"** button again to switch back to the **regular rich content editor**, and get a visual check that the embed is working.
7
Click **"Save"** to complete your edits on the page.
8
You're done! You can now test the H5P activity, and show it to students along with other page/module content.
