[Resolved] Get the thumbnail of a youtube video and display it in a Content Template

[Author]

Posts

[Nicholas]

Good day. I'd like to get the thumbnail of a youtube video and display it with a shortcode inside of a content template

I created a custom post field with toolset types called "youtube-video-1". Users paste a youtube url and then submit the form.
This outputs the iframe of the youtube video on the page.

Now I need your help to grab just the thumbnail from the youtube video i.e hidden link
ID = _jb-YrYJPro
thumbnail = hidden link

and store it in a another custom post field created with types to turn the youtube thumbnail into a shortcode, i can then display on the page.

I opened a ticket with a similar issue regarding the youtube ID not to long ago
https://toolset.com/forums/topic/get-the-id-of-a-youtube-video-and-display-it-with-a-shortcode/
Noman was so nice to help me out with it and he did a great job.

Thank you for your help.

Regards,
Nicholas

[Christian Cox]

Could you use the existing video ID to construct an image tag? Wrap it in a conditional that tests for an empty string in the video-id-slug field to suppress the entire image tag if it's empty:

[wpv-conditional if="( $(wpcf-video-id-slug) eq '' )" evaluate="false"]
  <img src="<em><u>hidden link</u></em> name='wpcf-video-id-slug']/maxresdefault.jpg" />
[/wpv-conditional]

[Nicholas]

Hello Christan.
Thank you. That makes a lot of sense. It's just that I need to add a meta tag for facebook sharing purposes and therefore I need to have the thumbnail stored in a custom field.

<?php
 if ( is_product() ) {
    global $post, $product;
    echo '<meta property="og:image" content="'.get_post_meta( $product_id, 'wpcf-youtube-video-thumbnail', true );">';
 }
 ?>

I don't know if this would work.
Let me know if you know of a better way how to do this.

[Christian Cox]

I think you could apply the same principle to add the URL prefix and suffix to the meta tag's content attribute. The conditional would be converted to a nested PHP if statement:

if ( is_product() ) {
    global $post, $product;
    $thumb = get_post_meta( $product_id, 'wpcf-youtube-video-thumbnail', true);
    if( $thumb ) {
      echo '<meta property="og:image" content="<em><u>hidden link</u></em>' . $thumb . '/maxresdefault.jpg">';
    }
 }

I'm not sure about the use of the $product_id variable, because I can't see the rest of your code. It's undefined in the context I can see, so you might need to do some additional work to get it from $post or $product.

[Nicholas]

Hello Christian I tried your code it wasn't working for me then I tried the following:

function fb_opengraph() {
    global $product;
 
    if(is_product()) {
        $yt_thumbnail_id = get_post_meta( $product_id, 'wpcf-youtube-video-id', true );       
        $img_src = '<em><u>hidden link</u></em>' . $yt_thumbnail_id . '/hqdefault.jpg';
        ?>
    <meta property="og:image" content="<?php echo $img_src; ?>"/>
 
<?php
    } else {
        return;
    }
}
add_action('wp_head', 'fb_opengraph', 5);

Unfortunately this didn't work for me either.
This code does add the meta tag and the link however the youtube id is missing from the link.

[Christian Cox]

Hi, it looks like the $product_id variable is undefined in your code. As I was explaining I am not sure about this variable, because I cannot see the rest of your code. But as it is now, that variable is undefined. You must somehow determine the correct Product ID and assign it to that variable. Typically in WooCommerce you can do something like this:

global $product;
if(is_product()) {
        $product_id = $product->get_id();
        $yt_thumbnail_id = get_post_meta( $product_id, 'wpcf-youtube-video-id', true );
        ... your code continues  ...

[Nicholas]

Thank you. I got it to work.