Do you know that you can use a video as a featured image in WordPress?
By default, WordPress doesn’t support adding featured videos. It only allows you to set featured images for your pages or posts. Well, just because something is hard doesn’t mean it’s impossible.
In this article, we’ll show you some tricks to get this task done. But first, let’s understand the reasons why you need featured video thumbnails.
- Benefits of WordPress Featured Videos
- #1 Use Featured Video Plugins
- #2 Embed Videos Using URLs
- #3 Apply Codes to Set Videos as Featured Images
Benefits of WordPress Featured Videos
Nowadays, almost all popular WordPress themes enable you to insert featured images into your posts and products. These primary images represent the main ideas of your content.
A good featured image can earn you a lot of user engagement. However, you can even get more clicks, page views, and sales by using featured videos.
Before you read further.... Free Download (PDF)
Secret Side Door
Secret Google Search Tactic That Will Skyrocket Your Sales, Connect You to the Perfect Partners, Influencers & Affiliates and Send Your Google Rankings Soaring! FREE when you sign up for Digital Creators Edge, a free newsletter for Digital Creators who wish to take their business to the next level.
Replacing a post or product’s featured image with a featured video benefits you in many ways.
Featured videos make your site much more vibrant and dynamic. Visitors can view these videos from nearly anywhere including the blog archives, homepage, and product pages. Plus, videos help you convey your brand message better than text and keep people staying on your site longer.
You can get more quality leads. If you own an online store, displaying a video at the top of the product page is a great move to capture customers’ attention. It makes them curious to scroll and learn more about your products. As a result, you have a higher chance of making a sale.
So, let’s see how you can set a video as a featured image in WordPress.
#1 Use Featured Video Plugins
Numerous plugins available on the market enable you to set videos as featured images in WordPress. Your job is to pick the right one, and the plugin will handle the rest.
In this tutorial, we’ll walk you through adding featured videos using the Featured Image from URL (FIFU) plugin. You can assign an external image, video, audio, or slider to featured media for your post or WooCommerce product.
- Install and activate the plugin.
2. In the WordPress admin dashboard, navigate to FIFU → Settings.
3. In the Featured video tab, toggle the Featured video button to On. Please note that you can use either self-hosted or external videos as featured images.
4. Configure the video settings such as Video Thumbnail, Play Button, Width, Autoplay, Mute, Gallery Icon, etc. to your liking.
5. Go to the page or post you want to add a featured video.
6. Copy and paste the video’s URL to the Featured video field.
7. Hit the Publish or Update button and enjoy the results.
Other Options
We found that FIFU is one of the most powerful featured video plugins with multiple advanced features. However, it costs you an extra fee to use the Featured video function.
If you prefer a free plugin with basic featured video functions, consider the Really Simple Featured Video plugin.
It assists you to embed videos hosted on third-party platforms such as YouTube and Vimeo and use them as featured videos. The plugin also works perfectly with WooCommerce to display featured videos at the top of the product pages.
- Install and activate the plugin.
2. Head over to Settings → Really Simple Featured Video in your admin panel.
3. Determine the place to where you want to add featured video thumbnails: Pages, Posts, or WooCommerce Products.
4. Hit the Save changes button.
5. Navigate to the Controls tab. Here you can configure the settings for both your self-hosted videos and embedded videos.
6. Press the Save changes button to finish.
#2 Embed Videos Using URLs
Making use of the video’s URL is a great technique if you intend to feature a video for your post. This way, people can watch the featured video on a blog gallery page without clicking on the article. Please bear in mind that this method is only compatible with WordPress posts, not pages.
- Go to the post you want to add a featured video.
- Insert the video’s share URL at the top of the post content.
- Make sure you enable the Format option under Screen Options.
4. Select Video in the Format field.
5. Publish or Update your post.
That’s it! Now, the video will display as a featured image on your post listing page. Visitors can play the video in the thumbnail without having to click on the post.
#3 Apply Codes to Set Videos as Featured Images
Take the following steps to create a featured video thumbnail for your WordPress post and page using codes.
- In the WordPress admin panel, head over to Appearance → Theme Editor.
- In the Theme Files menu, open the functions.php file.
3. Paste the code below to the end of the file to add an extra field on your page or post:
<?php
// Add the Page Meta Box
function codeless_add_custom_meta_box() {
add_meta_box(
'codeless_meta_box', // $id
'Codeless Page Options', // $title
'codeless_show_custom_meta_box', // $callback
'page', // $page
'normal', // $context
'high'); // $priority
}
add_action('add_meta_boxes', 'codeless_add_custom_meta_box');
// Add the Post Meta Box
function codeless_add_custom_post_meta_box() {
add_meta_box(
'codeless_meta_box', // $id
'Codeless Page Options', // $title
'codeless_show_custom_post_meta_box', // $callback
'post', // $post
'normal', // $context
'high'); // $priority
}
add_action('add_meta_boxes', 'codeless_add_custom_post_meta_box');
$prefix = 'codeless_';
// Field Array (Pages Meta)
$codeless_meta_fields = array();
// Field Array (Posts Meta)
$codeless_post_meta_fields = array(
array(
'label' => 'Featured Video Embed Code',
'desc' => 'Paste your video code here to show a video instead of a featured image.',
'id' => $prefix . 'video_embed',
'type' => 'textarea'
)
);
// The Callback for page meta box
function codeless_show_custom_meta_box() {
global $codeless_meta_fields;
codeless_show_page_meta_box($codeless_meta_fields);
}
// The Callback for post meta box
function codeless_show_custom_post_meta_box() {
global $codeless_post_meta_fields;
codeless_show_page_meta_box($codeless_post_meta_fields);
}
// The Callback
function codeless_show_page_meta_box($meta_fields) {
global $post;
// Use nonce for verification
echo '<input type="hidden" name="custom_meta_box_nonce" value="' . wp_create_nonce(basename(__FILE__)) . '" />';
// Begin the field table and loop
echo '<table class="form-table">';
foreach ($meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
// begin a table row with
echo '<tr>
<th><label for="' . $field['id'] . '">' . $field['label'] . '</label></th>
<td>';
switch ($field['type']) {
// text
case 'text':
echo '<input type="text" name="' . $field['id'] . '" id="' . $field['id'] . '" value="' . $meta . '" style="width:100%" />
<br /><span class="description">' . $field['desc'] . '</span>';
break;
// textarea
case 'textarea':
echo '<textarea style="width:100%" rows="2" id="' . $field['id'] . '" name="' . $field['id'] . '">' . $meta . '</textarea>
<br /><span class="description">' . $field['desc'] . '</span>';
break;
// checkbox
case 'checkbox':
echo '<input type="checkbox" name="' . $field['id'] . '" id="' . $field['id'] . '" ', $meta ? ' checked="checked"' : '', '/>
<label for="' . $field['id'] . '">' . $field['desc'] . '</label>';
break;
// select
case 'select':
echo '<select name="' . $field['id'] . '" id="' . $field['id'] . '">';
foreach ($field['options'] as $option) {
echo '<option', $meta == $option['value'] ? ' selected="selected"' : '', ' value="' . $option['value'] . '">' . $option['label'] . '</option>';
}
echo '</select><br /><span class="description">' . $field['desc'] . '</span>';
break;
} //end switch
echo '</td></tr>';
} // end foreach
echo '</table>'; // end table
}
// Save the Data
function codeless_save_custom_meta($post_id) {
global $codeless_meta_fields;
global $codeless_post_meta_fields;
// verify nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return $post_id;
// check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
//either post or page fields we'll be working with
$fields;
// Check permissions (pages or posts)
if ('page' == $_POST['post_type']) {
$fields = $codeless_meta_fields;
} else if ('post' == $_POST['post_type']) {
$fields = $codeless_post_meta_fields;
}
// loop through fields and save the data
foreach ($fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
} // end foreach
}
add_action('save_post', 'codeless_save_custom_meta');
?>
4. Find the function responsible for the featured image: the_post_thumbnail()
if ( has_post_thumbnail() && $post_format != 'gallery' && ( ! is_single() || is_single() ) ) : get_template_part( 'template-parts/blog/parts/entry', 'thumbnail' ); endif; ?>
5. Replace it with the following code:
if ( has_post_thumbnail() && $post_format != 'gallery' && ( ! is_single() || is_single() ) )
get_template_part( 'template-parts/blog/parts/entry', 'thumbnail' );
else if (get_post_meta(get_the_ID(), 'codeless_video_embed', true)) { ?>
<!-- show the featured video-->
<div class="videoWrapper">
<?php echo get_post_meta(get_the_ID(), 'codeless_video_embed', true); ?>
</div>
<?php } else { ?>
<!--if no featured image or thumbnail, do something...-->
<?php } ?>
6. Hit the Update File button to save your changes.
Finally, in your post or page, a new field to add the featured video will show up.
Make Full Use of Your Featured Video Thumbnails
We’ve demonstrated 3 ways to set a video as a featured image in WordPress. You can choose between using a plugin, embedding a video’s URL with the built-in function, or writing codes.
We highly recommend the first and second methods if you can’t find the post thumbnail function in your theme file.
In case you have any problems following our instructions, feel free to let us know in the comment section below. And most importantly, don’t forget to subscribe to our website for more useful tutorials.
