86511

Embedding Multiple YouTube Playlist Feeds on a Single Page? JQuery/YouTube API v3

Question:

How can multiple YouTube video playlist feeds be implemented on a single page? So far I have developed a function to deliver recent uploads from a single playlist, but I am not sure how to apply this to multiple playlists.

In the snippet provided, I only have a single playlist returning video list data. The HTML string for embedding the playlist is #youtube-playlist-feed_1, but ideally I would like the capability to implement more than one feed, for example: #youtube-playlist-feed_2, #youtube-playlist-feed_3, etc... Any input?

<pre class="snippet-code-js lang-js prettyprint-override">var htmlString = ""; var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38'; var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt'; var maxResults = 7; $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistID + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) { $.each(data.items, function(i, item) { var videoID = item['snippet']['resourceId']['videoId']; var title = item['snippet']['title']; var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1'; htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>'; }); $('#youtube-playlist-feed_1').html(htmlString); }); <pre class="snippet-code-css lang-css prettyprint-override">body { margin: 0; padding: 0; font-family: arial; font-size: 16px; } hr { border-bottom: 1px solid grey; margin: 20px 0; display: block; width: 100%; float: left; border-top: 0; border-left: 0; border-right: 0; } h1 { font-weight: bold; font-size: 18px; display: block; width: 100%; line-height: normal; } .video-wrap:first-of-type { width: 100%; max-width: 100%; display: block; } .video-wrap { max-width: 33.333333%; padding: 0; border: 0; box-sizing: border-box; float: left; } .video { width: 100%; margin: 0; line-height: 0; } .video a { display: block; } .title { text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: normal; padding: 5px; } .title a { text-decoration: none; color: #000000; } .video img { width: 100%; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

YouTube Playlist Feed #1:

<div id="youtube-playlist-feed_1"></div> <hr>

YouTube Playlist Feed #2:

<!-- INSERT 2ND YOUTUBE PLAYLIST FEED --> <div id="youtube-playlist-feed_2"> Playlist #2 ID: PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr- </div> <hr>

YouTube Playlist Feed #3:

<!-- INSERT 3RD YOUTUBE PLAYLIST FEED --> <div id="youtube-playlist-feed_3"> Playlist #3 ID: PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An </div>

<strong>UPDATE/SOLUTION:</strong>

Wow, big thanks to <a href="https://stackoverflow.com/users/1303785/dennis-rongo" rel="nofollow">Dennis Rongo</a> for helping achieve this <a href="https://stackoverflow.com/a/48633292/9214076" rel="nofollow">excellent solution</a>!

Now multiple playlist feeds can be embedded on a single page, demonstrated in the following snippet:

<pre class="snippet-code-js lang-js prettyprint-override">var htmlString = ""; var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38'; var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt'; var maxResults = 7; var playlists = [{ playlistId: 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt', el: '#youtube-playlist-feed_1' }, { playlistId: 'PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-', el: '#youtube-playlist-feed_2' }, { playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An', el: '#youtube-playlist-feed_3' } ]; playlists.forEach(function(playlist) { getVideoFeedByPlaylistId(playlist.playlistId, playlist.el); }) function getVideoFeedByPlaylistId(playlistId, el) { $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) { $.each(data.items, function(i, item) { var videoID = item['snippet']['resourceId']['videoId']; var title = item['snippet']['title']; var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1'; htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>'; }); $(el).html(htmlString); htmlString = ''; }); } <pre class="snippet-code-css lang-css prettyprint-override">body { margin: 0; padding: 0; font-family: arial; } hr { border-bottom: 1px solid grey; margin: 20px 0; display: block; width: 100%; float: left; border-top: 0; border-left: 0; border-right: 0; } h1 { font-weight: bold; font-size: 18px; display: block; width: 100%; line-height: normal; } .video-wrap:first-of-type { width: 100%; max-width: 100%; display: block; } .video-wrap { max-width: 33.333333%; padding: 0; border: 0; box-sizing: border-box; float: left; } .video { width: 100%; margin: 0; line-height: 0; } .video a { display: block; } .title { text-align: center; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: normal; padding: 5px; } .title a { text-decoration: none; color: #000000; } .video img { width: 100%; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

YouTube Playlist Feed #1:

<div id="youtube-playlist-feed_1"></div> <hr>

YouTube Playlist Feed #2:

<div id="youtube-playlist-feed_2"></div> <hr>

YouTube Playlist Feed #3:

<div id="youtube-playlist-feed_3"></div>

Answer1:

Something like this would work. <a href="http://plnkr.co/edit/MkEdlUX1b6U3a0BPwjfx?p=preview" rel="nofollow">Plunkr</a>

var htmlString = ""; var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38'; var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt'; var maxResults = 7; var playlists = [ { playlistId: 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt', el: '#youtube-playlist-feed_1' }, { playlistId: 'PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-', el: '#youtube-playlist-feed_2' }, { playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An', el: '#youtube-playlist-feed_3' } ]; playlists.forEach(function(playlist){ getVideoFeedByPlaylistId(playlist.playlistId, playlist.el); }) function getVideoFeedByPlaylistId(playlistId, el){ $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) { $.each(data.items, function(i, item) { var videoID = item['snippet']['resourceId']['videoId']; var title = item['snippet']['title']; var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1'; htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>'; }); $(el).html(htmlString); htmlString = ''; }); }

Recommend

  • YouTube API v3 returning 400 error when using pageToken
  • Add comment to youtube video
  • URL Encoding issue in swift ios
  • What's the best way to get round a 'Potentially Dangerous Request' error in asp.net?
  • Upload progress with RxJava, Retrofit
  • Ajax Requests to Facebook graph not working on IE
  • Returning parameters in Oracle SQL insert statements
  • React Video re-rendering issue in iOS
  • Retrieve Azure load balancer NAT port for Azure VM in C#
  • Media Controller in fragments
  • Admob: Interstitial ads showing every time
  • How to extend the Expiry of a Document DB REST API Resource Token
  • StorageMetadata' has no member 'downloadURL' [duplicate]
  • Should I reset my redux store on each router navigation?
  • Know if a video Youtube is unavailable with the API
  • GData Youtube : obtaining thumbnails
  • ListItem.Attributes.Add not working
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Display issues when we change from one jquery mobile page to another in firefox
  • What is Eclipse's Declaration View used for?
  • Optimizing database types to compact database (SQLite)
  • Can Jackson SerializationFeature be overridden per field or class?
  • Cross-Platform Protobuf Serialization
  • To display the title for the current loaction in map in iphone
  • Do I've to free mysql result after storing it?
  • Jquery - Jquery Wysiwyg return html as a string
  • SVN: Merging two branches together
  • php design question - will a Helper help here?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • trying to dynamically update Highchart column chart but series undefined
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Turn off referential integrity in Derby? is it possible?
  • Append folder name and increment by 1 using batch script
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How do I use LINQ to get all the Items that have a particular SubItem?