How to edit the page templates
I'm experiencing a persistent grey box around a <video> element embedded in a Brightspace HTML page using the Courseware_HTML_Templates (V5) package.
Details:
- The video is wrapped automatically in a container with the class:
.courseware-video-embed-responsive - This wrapper appears to apply a grey background or border that does not match our design intent.
Troubleshooting Attempted:
- Removed the
.courseware-video-embed-responsiveclass manually. - Applied inline styles such as:
background: transparent !important; border: none !important; box-shadow: none !important; - Wrapped the video in a
<div>instead of a<p>. - Inspected the DOM to confirm the styling appears to come from system-level CSS or injected parent containers.
Despite these efforts, the grey box persists.
Answers
-
Hi Kate. I work in the Learning Services team at D2L. I'll reach out to a Courseware Developer on our side and see if we can get you an answer!
-
Hi Kate, I'm a Courseware Developer with the Learning Services team at D2L.
Typically our video wrapper styles are applied automatically with the .courseware-video-wrapper class. You can change those styles on a page-by-page basis, or you can overwrite the styles for all videos using the HTML template.
You can change the styles on a single page by adding a <style> tag inside the html <head>. It would likely look something like this:
<style>
.courseware-video-wrapper {
background-color: none !important;
border-bottom: none !important;
}
</style>
To change the video styles across the whole HTML template, you can navigate to Public Files, then navigate to the folder HTML-Template-Library/HTML-Templates-V5/css/custom.css. Inside custom.css, you can add your custom css styles which will safely override the existing template styles. It would look something like this:
.courseware-video-wrapper {
background-color: none !important;
border-bottom: none !important;
}
