Is there a way to get youtube playlist thumbnail like how you can get a thumbnail of a video, explained here: How do I get a YouTube video thumbnail from the YouTube API?
With the YouTube API v3, you can get the playlist thumbnail using their v3/playlists endpoint and drilling down to items.snippet.thumbnails.high.url
For the following playlist:
https://www.youtube.com/playlist?list=PL50C17441DA8A565D
YouTube's API explorer has a playlist endpoint:
https://developers.google.com/youtube/v3/docs/playlists/list
This is the API call:
GET https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=PL50C17441DA8A565D&key={YOUR_API_KEY}
And here is the response:
{
"kind": "youtube#playlistListResponse",
"items": [
{
"kind": "youtube#playlist",
"id": "PL50C17441DA8A565D",
"snippet": {
"title": "Jay Chou Playlist",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/kGbDymJ75PU/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/kGbDymJ75PU/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/kGbDymJ75PU/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "it23"
}
}
]
}
This is what worked for me. Similar to the other post regarding playlist items but I just changed the API call. Hope it helps.
//get playlist itmes
$data = file_get_contents("https://www.googleapis.com/youtube/v3/playlistItems?key=< YOUR API KEY >&part=snippet&playlistId="<Put your playlist id here>");
//decode response from youtube
$json = json_decode($data);
//if you want to see the full response use print_r($json);
//each items in the response corresponds to a video in the playlist so lets get the first video (items[0]) get its snippet and corresponding thumbnails and we will take the url for the default size. If you want the second video use items [1] etc.
$video_thumbnail = $json->items[0]->snippet->thumbnails->default->url;
//set the videos alt tag as the snippet description
$video_alt = $json->items[0]->snippet->description;
//echo the image url into an image tag
echo '<img src="'. $video_thumbnail .'" alt="'. $video_alt .'" />';
There is no API for this purpose. Here is a workaround I can think of.
1) What youtube playlist thumbnail is? Played around with my account and seems the rule is as below:
if playlist has 5+ videos
thumbnail = first 5 video images
else if playlist has 1+ videos
thumbnail = all video images
else shows this list is empty
2) Then you can use the same way to get video thumbnails.
3) combine the images either on the client side (some CSS) or server side
Related
I’m attempting to use a YouTube video as a background but am unable to set the following parameters using
The YouTube video API
'autoplay': 1, 'controls': 0, 'mute' : 1, 'loop': 1
I’ve set my example on CodePen.
https://codepen.io/randometc/pen/GBXvKP
The function onYouTubeIframeAPIReady()
seems to be working(?) because the onStateChange function is firing.
function onYouTubeIframeAPIReady() {
player = new YT.Player('existing-iframe-example', {
videoId: 'cLzY3cmrgIU',
playerVars: {'autoplay': 1, 'controls': 0, 'mute' : 1, 'loop': 1 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
But the PlayerVars are not being read at all.
You may want to add the attributes to the end of that embed link as stated in this link. Example:
<iframe width="853" height="480" src="//www.youtube.com/v/lG5aSZBAuPs&autoplay=1&loop=1&playlist=lG5aSZBAuPs" frameborder="0" allowfullscreen></iframe>
Also based from this documentation regarding loop:
This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL.
"pictures": {
"sizes": [
{
"width": 100,
"height": 75,
"link": "https://i.vimeocdn.com/video/566955426_100x75.jpg?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F566955426_100x75.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 200,
"height": 150,
"link": "https://i.vimeocdn.com/video/566955426_200x150.jpg?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F566955426_200x150.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 295,
"height": 166,
"link": "https://i.vimeocdn.com/video/566955426_295x166.jpg?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F566955426_295x166.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 640,
"height": 360,
"link": "https://i.vimeocdn.com/video/566955426_640x360.jpg?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F566955426_640x360.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 960,
"height": 540,
"link": "https://i.vimeocdn.com/video/566955426_960x540.jpg?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F566955426_960x540.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
},
{
"width": 1280,
"height": 720,
"link": "https://i.vimeocdn.com/video/566955426_1280x720.jpg?r=pad",
"link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F566955426_1280x720.jpg&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
}
]
},
I am working on an ios app.
This is the JSON I am working with from the Vimeo API, and I want to know what is the proper way to handle these various images. I would like to grab the one with the height of 540, but in some cases the height might be 541, or something else. Also what if there is no image with a height of 540, should I grab the last image by default? What is the proper way to handle this? Should I just try and grab the second to last image (which is the one with height: 540 most of the time) and if there is only one image grab that one? From a production standpoint, how is this type of situation usually handled? Thank you very much for any help!
Your logic is up to you. Iterate through the list of images and find the one that is exactly 540. If that doesn't exist, it is up to you what to use instead. You can use the one that is closest to 540 (either bigger or smaller as you see fit). Picking the next larger one is probably best. It's usually better to make a larger image a little smaller than trying to show a smaller image scaled larger.
I have a API which returns JSON:
{
"id": 1,
"name": "A green door",
"price": 12.50,
"tags": ["home", "green"]
}
{
"id": 2,
"name": "A blue door",
"price": 13.50,
"tags": ["work", "blue"]
}
In iPad app, I need to show this in the following data table format:
id name price tags
1 A green door 12.50 home, green
2 A blue door 13.50 work, blue
I have tried the following https://github.com/brightec/CustomCollectionViewLayout but it does not work.
How can it be done?
You can create a simple table view. I created a simple example with your data. Sorry, I don't have time to add comments and the UI is basic.
Check the following example:
Show data into table view
With the YouTube Data API, I can retrieve a list of thumbnail images for a video resource. This request...
GET https://www.googleapis.com/youtube/v3/videos?part=snippet&id=DUM1284TqFc&fields=items%2Fsnippet%2Fthumbnails&key={YOUR_API_KEY}
...generates this response...
{
"items": [
{
"snippet": {
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/DUM1284TqFc/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/DUM1284TqFc/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/DUM1284TqFc/hqdefault.jpg",
"width": 480,
"height": 360
},
"standard": {
"url": "https://i.ytimg.com/vi/DUM1284TqFc/sddefault.jpg",
"width": 640,
"height": 480
},
"maxres": {
"url": "https://i.ytimg.com/vi/DUM1284TqFc/maxresdefault.jpg",
"width": 1280,
"height": 720
}
}
}
}
]
}
(API Explorer)
The maxres object has a width and height of 1280 and 720. However, the url (https://i.ytimg.com/vi/DUM1284TqFc/maxresdefault.jpg) actually points to a 1920x1080 image.
It seems that the "maxres" thumbnail is generated with the same size as the original uploaded video, and the size of this particular video (https://youtu.be/DUM1284TqFc) was 1920x1080.
I cannot find a 1280x720 thumbnail image for this video.
What do the width and height properties refer to?
How do I get the real width and height of the thumbnail images with the YouTube Data API?
Is there a 1280x720 version of the thumbnail image?
This appears to be a bug in YouTube's API. According to the documentation, the maxres thumbnail corresponds to:
The highest resolution version of the thumbnail image. This image size is available for some videos and other resources that refer to videos, like playlist items or search results. This image is 1280px wide and 720px tall.
I have seen this script to auto-mute video's from youtube embedded on a site:
How do I automatically play a Youtube video (IFrame API) muted?
The code is available on fiddle:
http://jsfiddle.net/9RjzU/3/
However I would like to know what to add to this code to prevent related videos appearing?
Thanks
Azzam
In your situation, all that is needed is to add 'rel': 0 to the PlayerVars parameters, like so:
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 1,
'autohide': 1,
'wmode': 'opaque',
'rel': 0
},
videoId: 'JW5meKfy3fY',
events: { 'onReady': onPlayerReady }
});
}
You might also be interested in the full list of parameters available for the YouTube iframe API, found here: https://developers.google.com/youtube/player_parameters#Parameters