Pima Tech Guides

H5P: Removing the H5P Content Border

Updated on

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

Image of a H5P Content File. On the top, the Title’s dropdown menu is highlighted in red and the 2nd option located in the menu “Edit HTML” is highlighted in red with an arrow indicating to select it.
Image of the H5P Content File’s HTML. The top toolbar has the last option, Source Code, highlighted in red with an arrow indicating to select it.

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

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.

You are done. Great job!

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Guide H5P: Embedding Content in D2L
Next Guide H5P: Optimizing Width for Viewing

H5P

H5P Webinars 4
H5P Basics For Students 3
H5P Basics For Instructors/Staff 5
H5P In D2L 7
H5P Smart Import (Generative AI Content Creator) 9
H5P Accessibility 2
H5P Editing 3
H5P Settings 2
H5P Misc 3
H5P Troubleshooting 3

Other Resources

Print Guide
Want Help From A Human? → Contact Us