Skip to main content
Social Sci LibreTexts

4.5: Embedding H5P Content into Learning Management Systems

  • Page ID
    195074
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Now that you have created some content, the next step is to learn how to embed that content into your course. For this section, we are outlining the steps for this within Brightspace (D2L) as it is the most commonly-used LMS in Ontario postsecondary education – however, here are links to tutorials for Canvas, Blackboard and WordPress.

    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”.

    An H5P content type with the word “Embed” from the lower left corner circled

    A small box titled “Embed” will appear on the screen. Copy the Embed code, ensuring you have both the beginning . 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.

    Embed code from H5P content type

    Step 2: Pasting the Embed Code in Brightspace

    Create a new file 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.”

    Brightspace with the Create A File option highlighted

    Format the new file as you wish (e.g., add text description, context). Then, when you have selected the position where 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, a circle 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.

    Brightspace with Copy Embed Code highlighted as next step

    Now your H5P content is embedded in your course!


    4.5: Embedding H5P Content into Learning Management Systems is shared under a CC BY-NC 4.0 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?