Dynamically change Video JS poster in jQuery

02 July, 2014 by Tom Elliott

Video JS is a fantastic cross-browser HTML 5 player with good support for older browsers such as IE 8 by making use of Flash video fallback.

After using Video JS on a recent project where I needed to dynamically change the video, I noticed an issue in IE 8 and IE 9 which was preventing the poster from being changed when selecting a new video.

This was because I was trying to target the ‘poster’ attribute on the video tag directly using the following code:

var videoposter = 'poster-image-file.jpg';
$('#video-tag-id video').attr('poster', videoposter);

It turned out to be far easier to target the class of the overlay div – ‘vjs-poster’ – that is created by Video JS:

var videoposter = "poster-image-file.jpg"
$('.vjs-poster').css({
 'background-image': 'url('+videoposter+')',
 'display': 'block'
});

Dynamically changing the Video JS poster using this method is far more reliable and has been tested on all major browsers including IE 8+, Chrome, FireFox and Safari

---

---