H5P: Removing the H5P Content Border

Updated on May 29, 2024

About

When H5P Content is embedded in D2L, a black border line typically encompasses the content which can be distracting for usability. To remove this issue, follow the steps outlined below in D2L's HTML for the H5P content file.

Step-by-Step Instructions

3. Navigate after the "Iframe" in the Source Code and insert the following text written below. Then Save.

Insert the Code: Style="border:none"

Image of the H5P Content File’s Source Code. After the Iframe in the code, Style=”border:none” is highlighted in red labeled 1 with an arrow indicating to insert the code first. On the bottom left, Save is highlighted in red labeled 2 with an arrow indicating to select it once finished.

4. Select Save and Close on D2L's HTML page.

Image of the H5P Content File’s HTML. The bottom left has Save and Close highlighted in red with an arrow indicating to select it.

5. Congratulations! The border is now successfully removed from the H5P Content.

Note: The black border trim surrounding the H5P Content is no longer present! Compare to the first image in this article to see the slight difference.

Image of the H5P Content example “Human Muscle Anatomy” successfully without a border.

0 Comments

Add your comment

Previous Guide H5P: Embedding Content in D2L

Next Guide H5P: Optimizing Width for Viewing

Pima Tech Guides

H5P: Removing the H5P Content Border

About

Step-by-Step Instructions

0 Comments

Add your comment

H5P

Other Resources