Featured pages : display a video instead of an image

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Hi,

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.

Leave a comment

Your email address will not be published. Required fields are marked *

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