Video Background for Front Page 1 section of Showcase Pro

In the comments section of Video Background in Infinity Pro, a user asked:

Please can You tell me how to do same on showcase pro theme?

This tutorial provides the steps to display a background video in the hero (front page 1) widget area of Showcase Pro.

Live Demo

Tested in Showcase Pro 2.0.2.

Step 1

Install and activate Video Background plugin.

Step 2

Create a Page titled say, Home.

Scroll down to “Video Background” section.

Enter #front-page-1 for Container.

Upload your video’s mp4 and webm versions and the fallback image (will appear in place of the video on tablets and mobiles).

Step 3

At Setting > Reading, set Home as the static front page.

Step 4

a) The current version of the theme outputs #front-page-1 and .front-page-1 twice on the frontend.

In front-page.php:

<div id="front-page-1" class="front-page-1 page-header bg-primary <?php echo $background_image_class; ?>" <?php echo $background_image; ?>>
    <div class="wrap">
        <?php

            genesis_widget_area( 'front-page-1', array(
                'before' => '<div id="front-page-1" class="front-page-1 widget-area">',
                'after'  => '</div>',
            ) );

        ?>
    </div>
</div>

Let’s fix this. Change

genesis_widget_area( 'front-page-1', array(
    'before' => '<div id="front-page-1" class="front-page-1 widget-area">',
    'after'  => '</div>',
) );

to

genesis_widget_area( 'front-page-1', array(
    'before' => '<div class="widget-area">',
    'after'  => '</div>',
) );

b) In showcase-pro/inc/entry-grid-shortcode.php wp_reset_query(); does not get executed since it appears after ob_get_clean().

This will result in global $post not being reset after the [entry-grid] shortcode’s ouput (used in Front Page 5’s widget area per the theme demo) causing Video Background and other plugins that rely on this custom metadata to not work.

To fix this error and make other code improvements in that file, replace its entire code with

<?php
/**
 * Showcase Pro
 *
 * This file adds the entry grid shortcode to the Showcase Pro Theme.
 *
 * @package Showcase
 * @author  Bloom
 * @license GPL-2.0+
 * @link    http://my.studiopress.com/themes/showcase/
 */

// Add Entry Grid Shortcode
add_shortcode( 'entry-grid', 'showcase_entry_grid_shortcode' );
function showcase_entry_grid_shortcode( $atts ) {

    extract( shortcode_atts( array(
        'limit'          => -1,
        'category'       => '',
        'name'           => '',
        'type'           => 'page',
        'id'             => get_the_ID(),
    ), $atts ) );

    $args = array(
        'post_type'      => $type,
        'post_parent'    => ($type === 'post') ? '' : $id,
        'posts_per_page' => $limit,
        'category_name'  => $category,
        'order'          => 'ASC',
        'orderby'        => 'menu_order',
        'paged'          => get_query_var( 'paged' ),
    );

    $loop = new WP_Query( $args );

    ob_start();

    $i = 0;

    while ( $loop->have_posts() ) {

        $loop->the_post();

        $classes = ($i % 4 == 0) ? 'one-fourth first' : ' one-fourth';
        ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class($classes) ?>>
                <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'showcase' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
                    <div class="overlay">
                        <div class="overlay-inner">
                            <div class="overlay-details">
                                <?php the_title( '<h4>', '</h4>' );?>
                            </div>
                        </div>
                    </div>
                    <?php if(has_post_thumbnail()) : the_post_thumbnail( 'showcase_entry_grid' ); endif; ?>
                </a>
            </div>
        <?php

        $i++;

    }

    wp_reset_postdata();

    $output = ob_get_clean();

    if ( $output ) {
        return '<div class="showcase-entry-grid">' . $output . '</div>';
    }

}

Diff between the original and above changed file can be seen here.

Step 5

Head over to the Customizer > Front Page Header Image.

Set the image to that of your video’s cover image.