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&byline=0&portrait=0&color=ffffff&autoplay=1&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”
First off, I feel like I’m calling into a radio show and praising your contribution to society.
Thank You Nicolas. Your contributions to society are truly in the upper echelons of history. I especially want to point out the quality of the responsive code in the Customizr. It is better than many million dollar company websites that attempt to trojan horse your phone with a “mobile version” that functions abnormally.
Second, why I am here.
1. Volume
There seems to be no way to control volume. This is very important for multiple videos. Vimeo doesn’t allow any automuting, from what I gathered from the alternative sites I read. Maybe there is a way to extract the volume button from the player and place it next to the featured image. Just a thought.
2. Youtube
I can’t get any youtube videos to work.
I meant to post this in the other forum on multiple videos for all multiple featured images.
Hi Christopher, thanks for getting in touch.
We know prefer to provide help and support on the snippet in the Customizr forum to reach a broader audience and help more users at the same time !
Would you mind posting your question there with a link to this snippet ?
Thanks 🙂
video take more time to load as comparison to image. To include image or video is totally depends on nature of website. For an ex. restaurant’s website needs an image, food buds and hungers will not waste time to see a video while the cooking website needs a video so that users can easily learn the recipe.
Hi Nicolas,
How can I put videos on each featured pages? Can I use videos imported in the media file instead of Youtube or Vimeo?
Best wishes,
Hi Loic, I recommend the youtube / vimeo approach. (video media file import in WordPress can be limited by the max upload file size)
If you want to use video in your media files, you’ll want to use the html5 video tag and filter the featured page content as described in this snippet.
Cheers
Thank you Nicolas,
Can we have more that one video on the front pages?
I cannot figure out how to have a different video for each featured page. Is that possible?
Best
Yes, I don’t see any problem to have different video for each featured pages since the filters for featured pages pass their unique ID as parameter.
Hope this helps!
Thank you very much Nicolas,
I suppose I need to learn how to do this, not sure how, certainly going to a php school!
If you have time perhaps it would be helpful to explain that little trick, I’m sure that would help a lot of nice people around.
When I’m copying your snippet twice, changing the “one” to “two”, it just obviously doesn’t work. That’s because I know nothing about php, and that is certainly above my competence.
Thank you again for your great work,
Best wishes
Hi Nikeo, I have done this in my child functions.php but all that happens is that the video shows up but when clicking on it to play it just navigates to the FP.
natureheals.co.uk
Not sure how to make it stay and play in the same frame or full screen on mobile without navigating away from the page?
Many thanks
Hi,
You might want to filter the FP content with ‘tc_fp_round_div’ hook to replace the link by another html tag.
Hope this helps,
Sorry Nicolas, but I have no idea how to do that.