Video player (beta)

The video player style is currently in beta. If the Video option is disabled in your Player style dropdowns please email us at [email protected] to discuss enabling it for your project.

Only sites using the latest player can select the "video" player style. Not using the latest player? See Updating to the latest player.

Use the video player style for a single post

The video player style can be set for each individual post on the post edit screen.

In the BeyondWords panel (Block editor) or the BeyondWords meta box (Classic editor), select Video in the Player style dropdown menu:

Block editor

Classic editor

Set video as the default player style

To apply the video player style to all your future posts by default, set Video as the Player style in the BeyondWords plugin settings page:

Replace the "Featured image" with a video player

Every WordPress theme has specific HTML elements and CSS styling, so there is unfortunately no single method to reliably replace the Featured image with a BeyondWords video player that will work for all themes. To achieve this you can make use of our WordPress filters to apply the relevant HTML and CSS for your specific theme.

An example of the required steps is provided below, using a standard BeyondWords install on a WordPress site using the Newspack theme.

If you are on an Enterprise or Pro plan we can provide direct support to help you fully integrate the video player into your site. Email us on [email protected] for assistance.

Step 1: Create a test post

Create a test post with a Featured image and Player style set to Video. When you view this post you should see a video player displayed in the default position – in-between the featured image and the post body. The video should have the featured image as the default video placeholder.

Step 2: Hide the default player

Hide the default auto-prepended player for posts with a Player style of Video with the following filter:

function my_remove_beyondwords_player_filter() {
    global $beyondwords_wordpress_plugin;

    if ( ! $beyondwords_wordpress_plugin || ! isset( $beyondwords_wordpress_plugin->player ) ) {
        return;
    }
    
    $post = get_post();
	
    if ( ! $post || is_admin() ) {
        return;
    }
    
    $playerStyle = get_post_meta( $post->ID, 'beyondwords_player_style', true );
	
    if ( $playerStyle === 'video' ) {
        remove_filter( 'the_content', array( $beyondwords_wordpress_plugin->player, 'autoPrependPlayer' ), 1000000 );
    }
}
add_action( 'wp', 'my_remove_beyondwords_player_filter' );

Step 3: Note the CSS classes applied to the featured image

Your featured image will likely have some CSS classes to style the img element, or a wrapper element. Inspect the HTML of the featured image and make a note of any classes or IDs.

In our example, we note down the HTML tags and CSS classes of both the wrapper figure element and the img element:

figure.post-thumbnail
img.attachment-newspack-featured-image
img.size-newspack-featured-image
img.wp-post-image

Step 4: Replace the featured image with a video player

Use the WordPress post_thumbnail_html filter to replace the Featured image with the BeyondWords shortcode.

function my_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $playerStyle = get_post_meta( $post_id, 'beyondwords_player_style', true);
	
    if ( is_single() && $playerStyle === 'video' ) {
        $html = do_shortcode( '[beyondwords_player]' );
    }
    
    return $html;
}
add_filter( 'post_thumbnail_html', 'my_post_thumbnail_html', 10, 5 );

View the post again and you should see a video player, although it may currently lack the CSS styling it needs to display it like a featured image.

Step 5: Apply CSS classes to the video player HTML

Modify the code above to add any required HTML tags and/or CSS classes to a wrapper element.

We decided to add img CSS classes we noted earlier into a div wrapper element:

...
    if ( is_single() && $playerStyle === 'video' ) {
        $html  = '<div class="attachment-newspack-featured-image size-newspack-featured-image wp-post-image">';
        $html .= do_shortcode( '[beyondwords_player]' );
        $html .= '</div>';
    }
...

View the post again and inspect the HTML. You should see that the player is now wrapped in the div element we have defined.

Continue to apply any required HTML wrapper elements and CSS classes to the shortcode to style it like a featured image.

You may find that you need to add custom CSS selectors and HTML classes to style the video player as intended. To do this, enqueue a CSS file using the WordPress wp_enqueue_styles action and specify the class names into your wrapper element.

Step 6: Optionally repeat steps 2-5 for all your featured image sizes or positions

Some themes, including the Newspack Theme, add options which allow you to set the position/size of the Featured image for each post.

If your site displays featured images in multiple positions/sizes you should repeat the steps above, testing the presentation of the player against all the relevant options.