{"id":11402,"date":"2019-06-21T09:24:43","date_gmt":"2019-06-21T09:24:43","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=11402"},"modified":"2020-05-07T12:09:50","modified_gmt":"2020-05-07T12:09:50","slug":"how-to-add-featured-video-in-place-of-featured-image","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-featured-video-in-place-of-featured-image\/","title":{"rendered":"How to add featured video in place of featured image"},"content":{"rendered":"\n

In AMP, if you want to display featured video instead of the featured image then follow the below steps.<\/p>\n\n\n\n

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<\/a><\/p>\n\n\n\n

\nFeatured video in Swift Theme<\/mark><\/h4>\n\n\n\n

Step 1:<\/strong> Create a folder with the name \u201campforwp<\/strong>\u201d in your theme which you are currently using. <\/p>\n\n\n\n

e.g: <\/strong>if you are using Twenty Seventeen theme then you have to create “ampforwp<\/strong>” folder in the twenty seventeen theme folder.<\/p>\n\n\n\n

The directory will look like<\/p>\n\n\n\n

ex: wp-content\/themes\/twentyseventeen\/ampforwp<\/strong><\/p>\n\n\n\n

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

The directory will look like <\/p>\n\n\n\n

ex: wp-content\/plugins\/accelerated-mobile-pages\/templates\/design-manager\/swift\/single.php<\/strong><\/p>\n\n\n\n

In \u201csingle.php<\/strong>\u201d 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

function prefix_amp_featured_section(){\n\tglobal $post;\n\t\n\t$post_id = '';\t\n\t$post_id = $post->ID;\n\tif ( function_exists('ampforwp_get_the_ID')) {\n\t\t$post_id = ampforwp_get_the_ID();\n\t}\n\t\n\t$youtubelink = get_post_meta($post_id, 'Video', true);\n\t\n\tif (  $youtubelink ) {\n\t\t$str = explode("youtu.be\/", $youtubelink);\n\n\t\t\t$container_start = '\n \n\t\t\t\t\t\t\t\n \n\t\t\t\t\t\t\t\t\n';\n\t\t\t$container_end = '\n';\t\n\t\t\tif(!empty($str[1])){\n\t\t\t\techo $container_start. '' . $container_end;\n\t\t\t}\n\t} else {\n\t\treturn amp_featured_image();\n\t}\n\treturn;\n}<\/pre><\/div>\n\n\n\n
In the above code, we are calling <amp-youtube> tag and it’s mandatory to load Script for it.<\/p>\n\n\n\n
add_action( 'amp_post_template_head', 'prefix_amp_post_template_head', 100);\nfunction prefix_amp_post_template_head($amp_post_template){\n\t\/**\n\t * check if youtube video exists in the content\n\t *\/\n\tglobal $post;\n\t$post_id = '';\t\n\t$post_id = $post->ID;\n\tif ( function_exists('ampforwp_get_the_ID')) {\n\t\t$post_id = ampforwp_get_the_ID();\n\t}\n\t$youtubelink = get_post_meta($post_id, 'Video', true);\n\t$scripts = $amp_post_template->get( 'amp_component_scripts', array() );\n\t\n\t\/**\n\t * we don't need to add script if it already registered\n\t *\/ \n\tif (!empty($youtubelink) && !isset($scripts['amp-youtube'])){\n\t\techo '';\n\t}\n\treturn;\n};<\/pre><\/div>\n\n\n\n
Replace the function name with your custom function name like in the below screenshot.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\nFeatured video in Design 1, Design 2 and Design 3<\/mark><\/h4>\n\n\n\n
Step 1:<\/strong> Create a folder with the name \u201campforwp<\/strong>\u201d in your theme which you are currently using.<\/p>\n\n\n\n
e.g: <\/strong>if you are using Twenty Seventeen theme then you have to create \u201campforwp<\/strong>\u201d folder in the twenty seventeen theme folder.<\/p>\n\n\n\n
The directory will look like<\/p>\n\n\n\n
ex: wp-content\/themes\/twentyseventeen\/ampforwp<\/strong><\/p>\n\n\n\n
Step 2:<\/strong> Create a new folder with the name “elements<\/strong>” inside this folder add the \u201cfeatured-image.php<\/strong>\u201d file of the design which you are using in amp (Design1, Design 2, Design 3)to override the featured image.<\/p>\n\n\n\n
The directory will look like<\/p>\n\n\n\n
ex: wp-content\/plugins\/accelerated-mobile-pages\/templates\/design-manager\/design1\/elements<\/strong>\/featured-image.php<\/strong> <\/p>\n\n\n\n
In \u201cfeatured-image.php<\/strong> \u201d file you need to remove the below variable name \u2013 $amp_html and replace it with your custom function name like in below the screenshot.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
add_action('ampforwp_before_featured_image_hook', 'prefix_insert_featured_video');\nfunction prefix_insert_featured_video(){\n \n $youtubelink = prefix_get_video_id();\n\n if ($youtubelink) {\n echo '';\n }\n}\n\nadd_filter('has_post_thumbnail','prefix_disable_featured_image_on_video');\nfunction prefix_disable_featured_image_on_video($image){\n \n $youtubelink = prefix_get_video_id();\n\n if ($youtubelink ) {\n $image  = false;\n }\n\n return $image;\n}\nfunction prefix_get_video_id(){\n\n global $post;\n \n $post_id = ''; \n $post_id = $post->ID;\n if ( function_exists('ampforwp_get_the_ID')) {\n $post_id = ampforwp_get_the_ID();\n }\n \n $youtubelink = get_post_meta($post_id, 'Video', true);\n \n if ($youtubelink){\n $youtubelink = explode('?v=', $youtubelink);\n }\n\n if ( $youtubelink[1] == null ) {\n $is_small_url =  strpos($youtubelink[0], 'be\/');\n if ( $is_small_url) {\n $youtubelink = explode('be\/', $youtubelink[0]);\n }\n }\n\n if ( $youtubelink[1]) {\n return $youtubelink[1];\n }\n return false;\n}\n\ufeff<\/pre><\/div>\n\n\n\n
In the above code, we are calling <amp-youtube> tag and it\u2019s mandatory to load Script for it.<\/p>\n\n\n\n
add_filter( 'amp_post_template_data', 'prefix_add_youtube_video_script' );\nfunction prefix_add_youtube_video_script( $data ) {\n\t\n\t$video_id = "";\n\t$video_id = prefix_get_video_id();\n\tif ($video_id ) {\n\t\tif ( empty( $data['amp_component_scripts']['amp-youtube'] ) ) {\n\t\t\t$data['amp_component_scripts']['amp-youtube'] = 'https:\/\/cdn.ampproject.org\/v0\/amp-youtube-0.1.js';\n\t\t}\t\n\t}\n\treturn $data;\n}\n<\/pre><\/div>\n\n\n\n
Replace variable name with your custom function name like in the below screenshot.<\/p>\n\n\n\n
\"\"

<\/figcaption><\/figure>\n\n\n\n
\nHow to Add Featured Videos by using plugin<\/mark><\/h4>\n\n\n\n
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:<\/p>\n\n\n\n
 Currently, we are fully compatible with Featured Video Plus plugin <\/strong><\/p>\n\n\n\n
Step 1: <\/strong>First thing you need to do is install and activate the Featured Video Plus <\/a>plugin. <\/p>\n\n\n\n
Step 2:<\/strong>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. <\/em> 
Now pick a video from your media library and click on the Update button like below the screenshot. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 3:<\/strong> Now you can check out your post from the front end and see how your featured video looks.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n
\n\t\t\tAsk your Questions Directly!<\/strong>
\n\t\t\t
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t