Video With Featured Image Poster In Genesis

This single post template displays your video before the entry title on single posts only. You can add a unique video URL for each single post and display it like this :

The code in the template enables you to :

• Add a poster using the featured image or custom field with a default poster.
• Display a different video on any single posts or single pages.
• Show WordPress self hosted or externally hosted videos like YouTube & Vimeo.
• Position the video before or after the entry title.
• Display the featured image if no video is added to the single Post Edit screen.
• Centre the play button over your poster image.
• Hide the video player controls when the poster displays and display the controls once the video starts playing ( only on hover ).
• Use the template in any Genesis child theme.

Demo Video

Shows the self hosted video, added on the single Post Edit screen using a custom field name video, displaying before the entry title on single posts.

Also shows the featured image displaying as the video poster with the play button centered over the image. When the post does not have a featured image, displays a default video poster from your themes image folder named poster.png.

When no video link added to the custom field, displays the featured image.

Tested using the Genesis Sample child theme by StudioPress however will work in ant Genesis child theme without modification.

Installation Steps

There’s only 2 steps :

1. # Upload the file named single.php to your Genesis child theme folder like this :

 



2. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

 

Download Folder

Style Controls

Use this CSS to make the controls background transparent.

.mejs-controls {
    background: transparent!important;
}

Related Tutorials

• Featured Videos On Archive Pages In Genesis