How to add featured video in place of featured image

In AMP, if you want to display featured video instead of the featured image then follow the below steps.

If you want featured video in Swift theme then follow this below steps but if you want feature video in Design 1, Design 2, and Design 3 then Click Here

Featured video in Swift Theme

Step 1: Create a folder with the name “ampforwp” in your theme which you are currently using.

e.g: if you are using Twenty Seventeen theme then you have to create “ampforwp” folder in the twenty seventeen theme folder.

The directory will look like

ex: wp-content/themes/twentyseventeen/ampforwp

Step 2: Add the “single.php” file of the design which you are using in amp (Design1, Design 2, Design 3 and Swift theme)to override the featured image.

The directory will look like

ex: wp-content/plugins/accelerated-mobile-pages/templates/design-manager/swift/single.php

In “single.php” file you need to remove the below function name – amp_featured_image() and replace it with your custom function name like in below the screenshot.

Below is the example code to fetch the featured video from meta filed you need to write this code in functions.php of your theme.

function prefix_amp_featured_section(){
	global $post;
	
	$post_id = '';	
	$post_id = $post->ID;
	if ( function_exists('ampforwp_get_the_ID')) {
		$post_id = ampforwp_get_the_ID();
	}
	
	$youtubelink = get_post_meta($post_id, 'Video', true);
	
	if (  $youtubelink ) {
		$str = explode("youtu.be/", $youtubelink);

			$container_start = '
 
							
 
								
';
			$container_end = '
';	
			if(!empty($str[1])){
				echo $container_start. '' . $container_end;
			}
	} else {
		return amp_featured_image();
	}
	return;
}

In the above code, we are calling <amp-youtube> tag and it’s mandatory to load Script for it.

add_action( 'amp_post_template_head', 'prefix_amp_post_template_head', 100);
function prefix_amp_post_template_head($amp_post_template){
	/**
	 * check if youtube video exists in the content
	 */
	global $post;
	$post_id = '';	
	$post_id = $post->ID;
	if ( function_exists('ampforwp_get_the_ID')) {
		$post_id = ampforwp_get_the_ID();
	}
	$youtubelink = get_post_meta($post_id, 'Video', true);
	$scripts = $amp_post_template->get( 'amp_component_scripts', array() );
	
	/**
	 * we don't need to add script if it already registered
	 */ 
	if (!empty($youtubelink) && !isset($scripts['amp-youtube'])){
		echo '';
	}
	return;
};

Replace the function name with your custom function name like in the below screenshot.

Featured video in Design 1, Design 2 and Design 3

Step 1: Create a folder with the name “ampforwp” in your theme which you are currently using.

e.g: if you are using Twenty Seventeen theme then you have to create “ampforwp” folder in the twenty seventeen theme folder.

The directory will look like

ex: wp-content/themes/twentyseventeen/ampforwp

Step 2: Create a new folder with the name “elements” inside this folder add the “featured-image.php” file of the design which you are using in amp (Design1, Design 2, Design 3)to override the featured image.

The directory will look like

ex: wp-content/plugins/accelerated-mobile-pages/templates/design-manager/design1/elements/featured-image.php

In “featured-image.php ” file you need to remove the below variable name – $amp_html and replace it with your custom function name like in below the screenshot.

Below is the example code to fetch the featured video from meta filed you need to write this code in functions.php of your theme.

add_action('ampforwp_before_featured_image_hook', 'prefix_insert_featured_video');
function prefix_insert_featured_video(){
 
 $youtubelink = prefix_get_video_id();

 if ($youtubelink) {
 echo '';
 }
}

add_filter('has_post_thumbnail','prefix_disable_featured_image_on_video');
function prefix_disable_featured_image_on_video($image){
 
 $youtubelink = prefix_get_video_id();

 if ($youtubelink ) {
 $image  = false;
 }

 return $image;
}
function prefix_get_video_id(){

 global $post;
 
 $post_id = ''; 
 $post_id = $post->ID;
 if ( function_exists('ampforwp_get_the_ID')) {
 $post_id = ampforwp_get_the_ID();
 }
 
 $youtubelink = get_post_meta($post_id, 'Video', true);
 
 if ($youtubelink){
 $youtubelink = explode('?v=', $youtubelink);
 }

 if ( $youtubelink[1] == null ) {
 $is_small_url =  strpos($youtubelink[0], 'be/');
 if ( $is_small_url) {
 $youtubelink = explode('be/', $youtubelink[0]);
 }
 }

 if ( $youtubelink[1]) {
 return $youtubelink[1];
 }
 return false;
}


In the above code, we are calling <amp-youtube> tag and it’s mandatory to load Script for it.

add_filter( 'amp_post_template_data', 'prefix_add_youtube_video_script' );
function prefix_add_youtube_video_script( $data ) {
	
	$video_id = "";
	$video_id = prefix_get_video_id();
	if ($video_id ) {
		if ( empty( $data['amp_component_scripts']['amp-youtube'] ) ) {
			$data['amp_component_scripts']['amp-youtube'] = 'https://cdn.ampproject.org/v0/amp-youtube-0.1.js';
		}	
	}
	return $data;
}

Replace variable name with your custom function name like in the below screenshot.

How to Add Featured Videos by using plugin

If you are not a developer and you think this code might be difficult to add featured video in place of the featured image so we have a better solution for this by using “Featured Video Plus” plugin you can easily place featured video for this you need to follow below steps:

Currently, we are fully compatible with Featured Video Plus plugin

Step 1: First thing you need to do is install and activate the Featured Video Plus plugin.

Step 2:Now edit your posts and add video links to the Featured Video box on the right you can either include the URL for your featured video manually or click on the camera icon next to where it says Video URL. 
Now pick a video from your media library and click on the Update button like below the screenshot.

Step 3: Now you can check out your post from the front end and see how your featured video looks.

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.