How to get a YouTube video screenshot image (thumbnail)?

Hello, I would like your help please

I have created a code in which you are taking the first picture of the messages and displays the topics_blog_box, for example see here

http://www.thegreeksenergy.com/f40-forum

I'd like the same code to add to displays the images from the video of Youtube after several attempts do not succeed.

Code:


        $(".blog_message").each(function () {
            if ($(this).find("img").length) {
                img_logsee = "";
                $(this).find("img").each(function () {
                    if ($(this).attr("src").search("smiles") == -1) {
                        img_logsee = $(this).attr("src");
                        return false
                    } else {
                        if (img_logsee == "") {
                            img_logsee = "http://i17.servimg.com/u/f17/17/06/15/51/no_ima10.jpg"
                        }
                    }
                })
            } else {
                img_logsee = "http://i17.servimg.com/u/f17/17/06/15/51/no_ima10.jpg"
            }
            $(this).text($(this).text());
            $('<img src="' + img_logsee + '" class="img_logsee" />').prependTo(this)
        });


Thank you!

Hello Paulostge,

The problem is that there is no image element in the youtube video. It is an embedded element, so you would need to get the first embed tag. For example :

Code:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/WREyAicJXkM" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit" height="350" width="425">

Say we want to grab the source of the first video from the first post, we could write this :

Code:

$(function() {
  console.log($('.post:first embed:first').attr('src'));
});

This way I know him , and thank you for your answers...

I would like a video where the matter comes into picture as for example is the picture here

http://www.thegreeksenergy.com/f40-forum

Look here for example

http://jsfiddle.net/9jgQU/


Also I would like to work with

Code:

[youtube]link[/youtube]

...and not with

Code:

<iframe></iframe>

ooh that is interesting !

You could do this :

Code:

'http://img.youtube.com/vi/'+$('.post:first embed:first').attr('src').split('/')[4]+'/mqdefault.jpg'

With :

Code:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/WREyAicJXkM" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit" height="350" width="425">

$('.post:first embed:first').attr('src').split('/')[4] = WREyAicJXkM

Thank you for your time but does not help

If you're loading the data from the topic you could do something like this :

Code:

$(function() {
  $('a.mytitle').each(function() {
    $(this).parent().find('#container').load($(this).attr('href') + ' .post:first embed:first', function() {
      $(this).find('embed').before('<img src="http://img.youtube.com/vi/'+$(this).find('embed').attr('src').split('/')[4]+'/mqdefault.jpg">').remove();
    });
  });
});

Iterate through all your titles, then traverse from the title to find your container and load the embedded element into it. After the load is complete we grab the src attribute and remove the embedded element.

Just to give you an example.

Although my ajax method has looked good idea to check