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.

You can search the user’s forum or ask the user community by opening a new thread in the Customizr theme forum. Before opening a new topic, you might want to follow the troubleshooting steps..

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”