Setting up MediaElementJS elements responsively

Hi Yvonne,

Apologies for the delayed response on this one. I have managed to find a way to display a custom poster image on the Media Lesson videos, which is then removed on play.

The problem you were experiencing stems from the video's .mejs-poster.mejs-layer class, which specifically specifies inline within the style code, that the poster display should be set to none, i.e. hidden.

I was able to target this class via JavaScript to override this property and set it to display: block. By specifying the block declaration via JS as opposed to CSS, which is what we were doing previously, the custom poster image is removed when the video is played.

To achieve this, you will need to do the following:

1. Add 'Script' from the 'Optional Properties' menu in the Media Lesson template.
2. Copy in the following code into the 'Script' code block:
   Code:

   // JavaScript / jQuery $(document).ready(function(){ $('.mejs-poster.mejs-layer').css({ 'display': 'block' }); })
3. Add 'Styles' from the 'Optional Properties' menu in the Media Lesson template.
4. Copy in the following code into the 'Styles' code block:
   Code:

   .mejs-poster { background-image: url("YOUR IMAGE PATHWAY - PLEASE AMEND ACCORDINGLY"); }
5. Click the 'Play' button and view the template. Your custom poster should load via CSS and the JS will rework the class so it is set to block display. The image should also disappear when playing the video

Can you let me know how you get on?

One quirk I've noticed with this template is that the first time the video loads, the video is paused with the poster. Go on to another slide and come back and the video auto plays each time, even with that optional property un-ticked. I haven't found a way to hack this yet, but maybe one for Ron and the team to consider. I suppose you could always add a custom JS call to pause the video element on each page load.

Hi Joel

Thanks for getting back to me. I did also go searching to see if I could find a solution on Google and found this that works. I added this to the Optional Script box for the video.

$('video').attr('poster', 'url of image here');

The poster image displays and when the video is clicked the image disappears to a whitebackground before the video starts. (It's a very quick change over so not too jarring).

Thanks again.

Yvonne

Thanks Yvonne. I started going down that route too, targeting the 'video' attribute via JQ, but I kept finding that overriding CSS in Xerte was hiding the poster image regardless, but it sounds like this worked for you and I'm glad you got it sorted out.