4
I have a page that in its layout there are 20 videos from Youtube, is a listing.
As 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 wonder if it has to load only the thumbnail of the video, then when I click open a colorbox, or something like that.
7
The Youtube has a specific URL to collect thumbnails of the videos:
http://img.youtube.com/vi/VIDEO_ID/#.jpg
The # can be 0, 1, 2 or 3 corresponding to thumbnails that Youtube generates for 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 Qualidade:
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 use is simple:
http://img.youtube.com/vi/wDP2Q11Dc5k/1.jpg
or
http://img.youtube.com/vi/wDP2Q11Dc5k/default.jpg
The use of the API is highly recommended because the collection of thumbnails from the URL is not documented making it unviable.
Example to use the API to collect it thumbnail above presented:
$.getJSON("http://gdata.youtube.com/feeds/api/videos/wDP2Q11Dc5k?v=2&alt=jsonc", function(json){
$("<img/>").attr("src", json.data.thumbnail.sqDefault).appendTo("body");
});
Much other information is provided with the use of the API:
Thank you very much. Is there any plugin that does this automatically?
@Felipestoker Who knows ;) It is a matter of analyzing the several existing. The first result is very close to what you want: http://lab.abhinayrathore.com/jquery_youtube/
Ball show, is opening like a colorbox! I would just like to know how to make it catch the image automatically. Because in the example is manual. I’m kind of layabout it, if I can help! : ) My code looks like this <img class="youtube" id="" src="codigoSYS" />, the codigoSYS it takes the iframe from my system.
If there was any way to inform on id only the cyEh0W5d-NQ(for example)
The v2 API doesn’t seem to work anymore...
3
Usually images are saved to the server img.youtube.
Knowing this we have two solutions:
2
I made an example joining jQuery to replace the Youtube thumbnail with the iframe with the video on autoplay.
The variable $yids is a collection of video Ids and from it pull up the thumbnails: http://img.youtube.com/vi/$video/0.jpg, and the 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( $yids as $video ) {
// http://www.php.net/manual/en/function.printf.php
printf(
'<li class="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.
Browser other questions tagged php youtube iframe
You are not signed in. Login or sign up in order to post.
And is the load dynamic? If you want any alternative it would be better to detail the question more
– brasofilo
@brasofilo the user will include the videos through a proper content manager developed where work, ie the loading is dynamic.
– Felipe Viero Goulart