Search code examples
javascriptajaxyoutubevimeovideo-thumbnails

Get Youtube and Vimeo thumbnails using ID on mobile

I am trying to get the thumbnails to display in a list I have a database where the video name, type (video provider: youtube or vimeo), and video id, but the thumbnails are not displaying at all. I am doing this inside a loop, i.e, writing the HTML doc in a for loop to get the whole list from the database. I did a lot of research but it is still not working. Any idea why? here is a portion of the code:

if (resp[0].recstatus != "NOTFOUND") { for (var i = 0; i < resp.length; i++) {

                p_str_li += "<li onclick=\"app.frmvideoGalleryService.viewModel.onVListClick('" + resp[i].drill_id + "')\" id='vid1" + i + "'  class='videoPreview'>"
                p_str_li += "      <div id='vid2" + i + "' class='vid_thumb'>"
                p_str_li += "         <a id='vid3" + i + "' >"
                p_str_li += "            <img id='vid4" + i + "' src='styles/images/placeholders/thumbnail.jpg' alt='commentPic'>"

                if (resp[i].video_type == 'VIMEO') {

                    $.ajax({
                        type: 'GET',
                        url: 'http://vimeo.com/api/v2/video/' + resp[i].video_id + '.json',
                        async: true,
                        jsonp: 'callback',
                        dataType: 'jsonp',
                        success: function (data) {
                            thumbnail_src = data[0].thumbnail_medium;
                            $('#vid4' + i).attr('src', thumbnail_src);
                        }
                    });


                }

                else if (resp[i].video_type == 'YOUTUBE') {
                    var thumbnail_src = 'http://i2.ytimg.com/vi/' + resp[i].video_id + '/hqdefault.jpg';
                    $('#vid4' + i).attr('src', thumbnail_src);
                }

                else {
                    $('#vid4' + i).attr('src', 'styles/images/placeholders/thumbnail.jpg');

                }

                p_str_li += "         </a>"
                p_str_li += "      </div>"

} }

Solution

  • Check these solutions: