Featured pages : display a video instead of an image


This short snippet allows you to replace the featured page image background by an embedded video.

It uses the filter hook named : fp_img_src for which you can specify 2 parameters : the featured page name (one, two, three) and the id of the post used as a featured page.

In the following example, I’ve grabbed the generated embedding code of a Vimeo video to replace the image of the first featured page (‘one’).

As you can see in the source code, I have specified the autoplay and loop options, and some style has been added as well : max-width:none;position: absolute;left: -86px;.


add_filter('fp_img_src' , 'set_video_for_fp_background' , 10 , 3);
function set_video_for_fp_background( $original_img, $fp_single_id , $featured_page_id ) {
	if ( 'one' != $fp_single_id )
		return $original_img ;
	return sprintf('<iframe style="max-width:none;position: absolute;left: -86px;" src="//player.vimeo.com/video/39312923?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1&amp;loop=1" width="445" height="250" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

Add this code to the functions.php file of your theme or child theme.

12 thoughts on “Featured pages : display a video instead of an image”

Comments are closed.