The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

2 posters

Go down

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

Post by Paulostge November 19th 2014, 7:59 pm

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!
Paulostge
Paulostge
Forumember

Male Posts : 129
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Ange Tuteur November 19th 2014, 10:21 pm

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'));
});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Paulostge November 20th 2014, 1:10 am

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>
Paulostge
Paulostge
Forumember

Male Posts : 129
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Ange Tuteur November 20th 2014, 1:21 am

ooh that is interesting ! Very Happy

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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Paulostge November 20th 2014, 10:25 pm

Thank you for your time but does not help
Paulostge
Paulostge
Forumember

Male Posts : 129
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Ange Tuteur November 20th 2014, 10:51 pm

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. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Paulostge November 21st 2014, 12:00 am

Although my ajax method has looked good idea to check
Paulostge
Paulostge
Forumember

Male Posts : 129
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum