CODEWITHSUNDEEP
javascriptjqueryyoutube
Norton
Norton

Reputation: 25

YouTube Data API - Playlist Items w/ Video Player [Code Examples]

Here's what I'm trying to do:

Retrieve videos from a playlist using the YouTube Data API (v3) and also include the video player for each playlist item.

I found this post and it describes exactly what I want to do: Is there a way to generate separate YouTube embeds for each video in a YouTube Playlist?

I checked out both links in the answer, and it makes sense, but I was wondering if anyone in the community has code examples for how to tie it altogether using JavaScript.

This is what I have so far:

$(document).ready(function() {
    var videosURL = "https://www.googleapis.com/youtube/v3/playlistItems?playlistId={myPlaylistID}&key={myAPIKey}&fields=items&part=snippet&callback=?";    
    $.getJSON(videosURL, function(data) {
        $("#results").append('<p>' + data.items[0].snippet.title + '</p>');
        $("#results").append('<p>' + data.items[0].snippet.description + '</p>');
    });
});

But couldn't figure out how to include the video player for each video.

Thanks in advance for any help!

Upvotes: 1

Views: 1449

Answers (2)

Mario Gonzales Flores
Mario Gonzales Flores

Reputation: 705

To display a list of videos

$(document).ready(function() {
   var videosURL = "https://www.googleapis.com/youtube/v3/playlistItems?playlistId={myPlaylistID}&key={myAPIKey}&fields=items&part=snippet&maxResults=6&callback=?";

$.getJSON(videosURL, function(data) {
$.each(data.items, function(i,val) {
$("#results").append('<iframe width="100%" height="360" src="//www.youtube.com/embed/'
+ val.snippet.resourceId.videoId
+ '" frameborder="0" allowfullscreen></iframe>');       
   });
  });
});
<div id="results"></div>

how get your playlistid?

https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername={myChannelName}&key={myAPIKey}

likes or uploads

Upvotes: 0

benomite
benomite

Reputation: 868

A workaround could be to print this:

$("#results").append(
    '<iframe width="100%" height="360" src="//www.youtube.com/embed/'
    + data.items[0].snippet.resourceId.videoId
    + '" frameborder="0" allowfullscreen></iframe>'
);

Hope it'll help.

Upvotes: 1

Related Questions