Featured pages : display a video instead of an image


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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 this code to the functions.php file of your theme or child theme.


Related Snippets you may also like


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

  • Christopher Kemmett

    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.

    • Christopher Kemmett

      I meant to post this in the other forum on multiple videos for all multiple featured images.

      • Nicolas Post author

        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 🙂

  • emma

    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.

  • loic leveque

    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,

    • Nicolas Post author

      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

      • loic leveque

        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

        • Nicolas Post author

          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!

          • loic leveque

            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

  • Antonio

    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

Comments are closed.