• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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 :

Add WordPress Video Shortcode Before Single Post Entry Title

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.  

    Step 1

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

    Step 2

Download Folder

Style Controls

Use this CSS to make the controls background transparent.

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

CSS to make video controls background transparent

Related Tutorials

  • Featured Videos On Archive Pages In Genesis

Custom Fields Featured Image Video

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems