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:

 function mbYTPlayer_addToCat(){

// Check if the mb.YTPlayer plugin is installed
if ( function_exists( 'mbYTPlayer_init' ) && !isMobile() ){

    // Define the videoID variable.
    // You can condition this string to the page type and use different videos for different pages.
    $mbYTPlayer_video_ID = false;

    // Check if the actual page is the Archive for the Category with ID 9 and set the video ID
    if ( is_archive(9) ) 
        $mbYTPlayer_video_ID = "eqSphrFyFy8";

    // Check if the actual page is the Archive for the Category with ID 12 and set the video ID  
    if ( is_archive(12) ) 
        $mbYTPlayer_video_ID = "QWephfge56";    

    // Check if the actual page is the search result page and set the video ID
    if ( is_search() ) 
        $mbYTPlayer_video_ID = "YGsdShfga4"; 

    // If the $mbYTPlayer_video_ID has been valorized (is_archive(9) or is_archive(12) or is_search() )
    if( $mbYTPlayer_video_ID ){

        // Define a string containig the HTML part to be injected via javascript
        $mbYTPlayer_player_catvideo = '<div id=\"bgndVideo_cat\" data-property=\"{videoURL:\'' . $mbYTPlayer_video_ID . '\', opacity:1, autoPlay:true, containment:\'body\', startAt:0, stopAt:0, mute:true, optimizeDisplay:true, showControls:true, loop:true, quality:\'defauylt\', ratio:\'auto\'}\"></div>';

        // Print out the javascript to initialize the YTPlayer into the page
        echo '
	<!-- mbYTPlayer Category -->
	<script type="text/javascript">
	jQuery(function(){
	    var catvideo = "' . $mbYTPlayer_player_catvideo . '";
	    jQuery("body").prepend(catvideo);
	    jQuery("#bgndVideo_cat").YTPlayer();
    });
	</script>
	<!-- end mbYTPlayer Category -->
        ';
    }
  }
}

// Add the function to the "wp-footer" action.
add_action('wp_footer', 'mbYTPlayer_addToCat',10);

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.