Adding a persistent play button

I needed a persistent play button, and was able to use @writegnj ‘s answer from 2015 to get most of the way there. Thank you @writegnj

I added an onResize in addition to the code from that previous answer. So the complete additional code added before the closing })(jQuery); looks like this:

// Add width, height values and play class to video div

var fvplw = $('.fvp-dynamic').width();

var fvplh = $('.fvp-dynamic').height();

$('.fvp-actionicon').css({'width': fvplw, 'height': fvplh});

$('.fvp-actionicon').addClass('play');

});

// Rewrite height and width on resize

$(window).on('resize',function() {

var fvplw = $('.fvp-dynamic').width();

var fvplh = $('.fvp-dynamic').height();

$('.fvp-actionicon').css({'width': fvplw, 'height': fvplh});

}).trigger('resize');

The version of the plugin that I was using a frontend.min.js file, so I minified the contents of frontend.js after making the edits, and copied that over to the minified version.

You can also make changes directly to the plugin’s frontend.css file to change the icon and color used in the overlay. The two rules that I modified were:

.fvp-overlay .fvp-actionicon,
.fvp-dynamic .fvp-actionicon {
 // your custom css
}

and

.fvp-overlay .fvp-actionicon.play,
.fvp-dynamic .fvp-actionicon.play {
 // your custom css
}

I hope that saves someone else some time.