Add a YTPlayer background video on WordPress post category page

I’m writing this post because of the many questions I received on how could be implemented the YTPlayer in a category page of WordPress.

Adding it to the home page (when the home page is the recent post list) and to the front page (the static page that has been set as home in WP)  is quite simple; just go to the settings page of the component and fill all the fields you need; the background video will be there!

Adding it to a generic page or post is as simple as for the homepage; on the post/page editor there’s a button on the top bar of the TinyMCE  that opens a short-code composer to let you inject easily a background video into the post or the page. In the truth you can also use the short-code composer to create a simple light and clean video player in the content itself.

YTPlayer-short-code

But what about if you want to run a background video on a category list page or on a tag list page or on the search result page?

At the time the plugin has not implemented any way to add a background video on that pages but you can overcome this lack by adding some code to your function.php file in your theme.

WordPress expose Conditional Tags to let us add specific content depending on the page type. Using those conditionals you can add your own function that inject the YTPlayer into any of the page you can’t otherwise reach. You should add this function to the “wp-footer” action.

Below a simple example to add the YTPlayer background video both on the archive page for the Category with ID 9 and on the search result page:

The above code is just an example and could probably be written better :-). It’s here just to give you a hint on how you can solve this kind of problems.

 

Leave a Reply

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

    • Hi,
      You should simply activate the YTPlayer background video and remove the section background via CSS. For example if you want to have the background video on the “Your team” section you should overwrite the .our-team class removing the background color:

      .our-team {
      background: none!important;
      }

      Hope this help,
      Matteo

  1. Hi Pupunzi,
    Thank you for all the effort you’ve put into this plugin. I’ve almost got it to work the way I want it to. With the YTPEND command you’ve posted above I suspect we’re also able to create a playlist I suppose intead of just one (random if separated by a comma) video playing in the background. Will you add that functionality to your plugin in the future as well as you either have to put in the code yourself or use the built in plugin in wordpress? It would be nice to also be able to select a fallback image in the plugin and maybe functionality to create a playlist/maybe even a video switcher with buttons. I will also try to achieve that myself while playing around with the codes you have supplied, I am a very novice at actual coding though! Well thanks for all the work you’ve done! Really appreciate it.

  2. Hi, I have used mb.YTPlayer, and it worked just fine, until I wanted to change the video into another video.

    Although I changed the youtube URL, the video posting on my website doesn’t change and still is the first video.

    Do you have any suggestions? I would love to hear them,

    thank you

  3. Hi:

    I’m evaluating this plugin for use in our site, however, I’m not sure if I can use it as most of my expected visitors will open the site from a mobile device. Like with Robert, I’m looking for a fallback image if the video takes longer than xxx msecs. to load. I’m also looking for an option to play local videos as backgrounds.

    Can you let us know if any of these updates are in your plans?
    If not in your plans, would it be possible to let us know how we can use a background image as a fallback?

    Best Regards,

  4. lov the background video plugin!

    Is there a way to have your background image stick around on mobile devices when using this plugin. When I first installed i had to remove the background image so the youtube video could be played, since it was underneath it. it would be ideal to keep it especially for mobile devices if there is a way to do it. Thanks for your answer in advance,

    • Hi Tim;
      The YTPlayer lug-in expose events for each state of the player; If you want to add a behavior when the video end you should use the “YTPEnd” event as follow:

      $(“#playerID”).on(“YTPEnd”,function(){
      //… your code here
      });

      Whatever you define there will be executed once the video reaches the end.

      Bye,
      Matteo