Upload only thumbnail videos from Youtube

Navigation
4

I have a page that in your layout there are 20 Youtube videos, it's a listing. Since I do not want to make this page really load all these videos to not understand the performance of the site, because iframe weighs a lot. I would like to know if you have just how to load the thumbnail of the video, then when I click open a colorbox, or something like that.

    
asked by anonymous 20.06.2014 / 13:59

3 answers

7

Via URL

YouTube has a specific URL for collecting the thumbnails of videos: 

http://img.youtube.com/vi/VIDEO_ID/#.jpg

The # can be 0, 1, 2, or 3 that match the thumbnails that YouTube generates for the video:

Via number: 

0 = 480×360 pixeis (Tamanho normal)
1 = 120×90 pixeis  (captura 01)
2 = 120×90 pixeis  (captura 02)
3 = 120×90 pixeis  (captura 03)

Via Quality: 

default = 120x90 pixeis    (normal)
mqdefault = 320x180 pixels (qualidade média)
hqdefault = 480x360 pixels (qualidade elevada)

For HD videos we also have: 

sddefault = 640x480 pixels       (normal)
maxresdefault = 1920x1080 pixels (máxima resolução)

The usage is simple: 

http://img.youtube.com/vi/wDP2Q11Dc5k/1.jpg

or 

http://img.youtube.com/vi/wDP2Q11Dc5k/default.jpg

ThroughtheAPIv2.0

UsingtheAPIishighlyrecommendedasthumbnailsfromtheURLarenotdocumentedmakingitimpractical.

ExampletousetheAPItocollectthesamethumbnailshownabove:

jQueryand YouTube API 2.0 

$.getJSON("http://gdata.youtube.com/feeds/api/videos/wDP2Q11Dc5k?v=2&alt=jsonc", function(json){
    $("<img/>").attr("src", json.data.thumbnail.sqDefault).appendTo("body");
});

Many other information comes with using the API:

    
20.06.2014 / 14:05
3

Usually the images are written to the server img.youtube .

Knowing this we have two solutions:

  • Get the hardcoded url image link {video id} /0.jpg
  • Use the youtube API to retrieve urls from the images.
    • 20.06.2014 / 14:04
    2

    I've done an example by joining jQuery to replace the YouTube thumbnail with iFrame with the video in autoplay .

    The variable $yids is a collection of video IDs and it draws the thumbnails: http://img.youtube.com/vi/$video/0.jpg , and iframe that is injected via jQuery using that same ID. 

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  ul { list-style-type: none; }
  a.y-img { opacity: .5; }
  a.y-img:hover { opacity: 1; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script></head><body><ul><?php$yids=array('5MnhFmFDLj8','Bl4Qne-RpcM','3zzWoWojYQI','ep0_0W0qWsc','eORqFaf_QzM','WdkT4_OJ2WU');foreach($yidsas$video){//http://www.php.net/manual/pt_BR/function.printf.phpprintf('<liclass="y-thumbs"><a data-yt="%s" href="javascript:;" class="y-img"><img src="%s" /></a></li>', 
            $video,
            "http://img.youtube.com/vi/$video/0.jpg"
        );
    }
    ?>
    </ul>
<script>
$('a.y-img').on( 'click', function(){
    // Substitui todo o conteúdo do <li> pelo iframe
    $(this).parent().html( '<iframe width="480" height="360" src="http://www.youtube.com/embed/'+$(this).data('yt')+'?autoplay=1" frameborder="0" allowfullscreen></iframe>');
});
</script>
</body>
</html>

    You can extract the video ID from the YouTube URL using this function .

        
    20.06.2014 / 17:07
    Normalization of tables and Relationships Error in controller ViewData