Replace featured images in a Genesis theme with a featured video from YouTube, Vimeo and other sources.
Replace featured images on your blog or archive pages in your Genesis theme with a featured video from YouTube, Vimeo, other video hosting services, or even self-hosted videos. This plugin lets your visitors play the video without having to click into the post to view it.
Custom post types are supported, so you can use this plugin to show product demonstration videos for WooCommerce or Easy Digital Downloads products, or show a promotional video for an upcoming event.
This plugin requires your site to be using a Genesis child theme in order to work. It is not compatible with other themes.
Plugin author is a third-party developer who is not affiliated with StudioPress, the owner of the Genesis Framework.
On the post edit page, there are two areas for you to look for. The first is titled “Format”. The second is titled “Genesis Featured Video”.
On each post that you want to display a featured video on the archive page select “Video” from the Format section, and paste the URL to a video in the Genesis Featured Video section. Update or publish your post, and you should see your video replace the featured image on your blog or archive page.
For YouTube and Vimeo videos, copy the URL from your browser’s address bar when you are viewing the video on their site. You may also enter a direct URL to any video hosted elsewhere. For example https://www.youtube.com/watch?v=0hEJe3HwOUs
or http://example.com/videos/my-video.mp4
There are two ways. The first, and probably the easiest way is to simply not enter a video URL or select the Video post format on any custom post types that you don’t want it to show up for.
If you are trying to remove the functionality altogether from certain post types, there is a filter included with the plugin that lets you edit the post types this plugin will allow featured videos to be used on.
function change_post_types( $post_types ) { // only use plugin on posts and books $my_cpts = array( 'post', 'book', ); // set $post_types to your cpt array $post_types = $my_cpts; return $post_types; } add_filter( 'gfv_post_types', 'change_post_types' );
There is a widget included with this plugin that will show featured videos. The widget is called “Featured Posts with Videos”.
The default Genesis Featured Posts widget cannot display featured videos.
The widget settings are identical to the Genesis Featured Posts widget with the exception of the “Show Featured Video” option.
Check the box to enable featured videos in the widget, then enter the width and height of the video thumbnail that will appear in the widget. This can be different from the settings in the Genesis > Featured Video settings page if desired. It is a good idea to follow the theme’s setup guide and insert the recommended dimensions for the featured image in the widget area you’re working with.
All other settings are the same as the Genesis Featured Posts widget.
If you only have some posts with featured videos, you can also check the Show Featured Image box to allow a featured image to be displayed when there is no featured video. A featured image and featured video will not both display at the same time, so if your post has both, only the featured video will display.
You can embed the video the same way that you normally embed videos in a post, or you can use a small line of code to force your video to show up on the post page.
add_action( 'pre_get_posts', 'add_video_to_posts', 1 ); function add_video_to_posts() { remove_action( 'pre_get_posts', 'gfv_hide_video_on_post', 10 ) ; }
Go to the settings page on the Genesis > Featured Video menu in your site’s admin area.
Width and height need to be entered in pixels.
Alignment is currently set to left, right, or none.
The video will be wrapped in a <div>
with one of the following classes depending on the position you select in the settings.
You can use that class to add styles to your videos.
Videos are commonly displayed with an aspect ratio of 16:9. Not all videos use this aspect ratio, but it is a good place to start.
If you are using a square width and height (i.e. 150×150), your video will likely look distorted.
If you are unsure what an aspect ratio is, or how to calculate the width and height your video needs, visit http://andrew.hedges.name/experiments/aspect_ratio/. Enter 1920 in the W1 box, 1080 in the H1 box, and the Width OR Height you want your video to be in the W2 or H2 box respectively. The site will output the other dimension that you will need.
We try to remove the featured image using some of the more common actions for inserting a featured image on the blog page. We can’t account for all of them though.
If you’re seeing the featured video and a featured image show up, we have an action that you can use to remove the featured image only when there is also a featured video.
You’ll need to look through your theme’s files to find the action that’s used to insert the featured image. It will usually have the function genesis_do_post_image
, so you can search for that if you’re unsure. Copy the whole add_action...
line, and paste it into the function below. Change add
to remove
and save. You should have successfully removed the featured image when there is also a featured video.
add_action( 'gfv_remove_post_image', 'sd_remove_post_image' ); function sd_remove_post_image(){ /* This is an example of the action that inserts the featured image into your blog page. * add_action( 'genesis_entry_header', 'genesis_do_post_image', 1 ); * Copy yours below, and change the add in add_action to remove like shown below. */ remove_action( 'genesis_entry_header', 'genesis_do_post_image', 1 ); }
You’ll also want to add it back later on in the loop if there are other posts without a featured video. You can do so with the following hook:
add_action( ‘gfv_add_post_image’, ‘sd_add_post_image’ );
function sd_add_post_image(){
/* This is an example of the action that inserts the featured image into your blog page.
* add_action( ‘genesis_entry_header’, ‘genesis_do_post_image’, 1 );
* Copy yours below.
*/
add_action( ‘genesis_entry_header’, ‘genesis_do_post_image’, 1 );
}
gfv_add_post_image
to let theme developers add back featured images that were removed with gfv_remove_post_image
.gfv_remove_post_image
to let theme developers remove featured images that are inserted with actions this plugin doesn’t consider.