CSS for Video on Course Landing Pages

Are you saying you want to add a video the course description?

You can do that by storing your video on a player like Vimeo or YouTube and using the icon (see below) to link to it.

The easiest way is to add preview material to a course under Properties → Catalog Options → Demo Material (up to 4 MB).  It will end up looking like this:

The benefit to this approach is that it is course-specific.

You could conceivably use CSS to change the background of an element (like the blue header above) to a video, but it would apply to every course page with that element.  To do that convert your video to an animated gif and use this CSS (changing out the gif for one of your own):

dcb-te-content-overview-header .dcb-te-content-overview-header-wrapper.dcb-te-content-overview-header-with-background-image, dcb-te-content-overview-header .dcb-te-content-overview-header-wrapper.dcb-te-content-overview-header-with-background-color {

background-image: url("https://media1.tenor.com/m/MWz8PRVJtywAAAAC/regret-evator.gif") !important;

}

If you need a page-specific video which can appear anywhere you want, then you’d need to resort to JavaScript, which is not supported by Docebo.

​@elamast I get what you're saying but 4MB for a video could be way too small a file size.

Agreed.  For that we should probably open up a feature request to change the size limit.

The only other way I can think of is to use JavaScript, which I probably can’t give details on in this forum.

Thanks everyone. I looked at the demo material option but 4mb is too small for a video file. Sounds like there still is not a feasible option for this.