Featured Video Play Icon

Plug-in: featured-video-plus

My plan was to use my xpost / featureddiv / featuredxpost set-up for featured videos but I soon ran into complexities. After finding this plug-in it made sense to use it.

https://wordpress.org/plugins/featured-video-plus/#installation

The Simone theme I’m using didn’t seem to work with it automatically, so I amended my content.php and content-single.php again.

CODE SNAPSHOT 28th June 2017

  
content-single.php (EXTRACT)

...

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php
    if (has_post_thumbnail()) {
        echo '<div class="single-post-thumbnail clear">';
        echo '<div class="image-shifter">';
        the_post_thumbnail();
        echo '</div>';
        echo '</div>';
    }
    else if (has_post_video())
    {
        // https://wordpress.org/plugins/featured-video-plus/#installation
        // Xarta adding to Simone theme
        echo '<div class="single-post-thumbnail clear">';
        echo '<div class="image-shifter">';
        echo get_the_post_video( $post->ID, "full" );
        echo '</div>';
        echo '</div>';
    }
    // etc. etc.
    ?>

content.php (EXTRACT)

...

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php
    // etc. etc. ... no featured image, on top of front page (most recent):
    else if (has_post_video())
    {
        // https://wordpress.org/plugins/featured-video-plus/#installation
        // Xarta adding to Simone theme
        // adding an absolute div for the <a> link to the article ...
        // my reasoning is that even though that will mean it won't play on devices like Android phones,
        // since the video will be featured in the main article anyway, it doesn't really matter
        echo '<div class="single-post-thumbnail clear">';
        echo '<div class="image-shifter" style="position: relative; ">';
        echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
        echo '<div style="position: absolute;  height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
        echo '</div>';
        echo '</a>';
        echo get_the_post_video( $post->ID, "thumbnail" );
        echo '</div>';
        echo '</div>';
        }
    // etc. etc. , and no featured image, and not top of front page:
    // ...
        else if (has_post_video())
        {
            // https://wordpress.org/plugins/featured-video-plus/#installation
            // Xarta adding to Simone theme
            // adding an absolute div for the <a> link to the article ...
            // my reasoning is that even though that will mean it won't play on devices like Android phones,
            // since the video will be featured in the main article anyway, it doesn't really matter
            echo '<div class="small-index-thumbnail clear" style="position: relative; ">';
            echo '<a href="' . get_permalink() . '" title="' . __('Read ', 'simone') . get_the_title() . '" rel="bookmark">';
            echo '<div style="position: absolute;  height: 100%; width: 100%; z-index: 5; overflow: hidden;">';
            echo '</div>';
            echo '</a>';
            echo get_the_post_video( $post->ID, "thumbnail" );
            echo '</div>';
        }


    ?>


Use with YouTube

Screenshot of xarta.co.uk blog WordPress admin dashboard, showing this very post, making use of the featured video plus plug-in

This very post uses my YouTube demo video to err … demo.

It’s similarly simple to use with any oembed enabled video source, and media-library videos. Though as I understand it, private videos (on YouTube) won’t work so I’ll need alternatives for that situation. No luck with Cloudinary, though yet – even with the settings-set to permit non-oembed sources … need to investigate what I need to do to make Cloudinary compatible (or any source – some kind of embed tag?).

I’ll add a media “site” to my home websites as I’m more familiar with streaming with IIS rather than Apache, but I’d prefer to use Cloudinary where possible as I only have limited bandwidth to serve from at home.

e.g.

Cropped screenshot of featured video plus plug-ins meta input form on the WordPress post-edit form, not resolving Cloudinary sourced videos