Insert YouTube Channel Feed & Player into any site using JSON

insertyoutubefeed

<style>
  #videogroup {
    width: 100%;
  }

 iframe {
    width: 90%;
    padding: 5%;
  }

  #myplayer .first iframe {
    width: 100%;
    padding: 0;
  }
  
  #videolist ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #videolist li {
    width: 50%;
    float: left;
    border: none;
    position: relative;
  }

  #videolist li .entriestitle {
    padding: 0 5px;
    position: absolute;
    left:80%;
    top:20%;
    display: none;
  }
  
  #videolist li:hover .entriestitle {
    display: block;
    width: 100%;
    background: rgb(119, 25, 51);
    border-radius: 10px;
    color: #FFF;
    padding: 10px;
    opacity: .9;
    z-index: 100;
    right: 0;
  }

</style>

<script type="text/javascript">

function listVideos(data) {
  var firstOutput="";
  var entries = data.feed.entry;
  var myOutput = '<ul>';
  for (var i=0; i<data.feed.entry.length; i++) {
    var entriesID=entries[i].id.$t.substring(38);
    var entriesTitle=entries[i].title.$t;
    var entriesDescription=entries[i].media$group.media$description.$t;
    var entriesThumbnail=entries[i].media$group.media$thumbnail[0].url;
    myOutput += '<li><div class="entriestitle">' + entriesTitle + '</div>';
    myOutput+='<iframe src="http://www.youtube.com/embed/'+entriesID+'?wmode=transparent&amp;HD=0&amp;rel=0&amp;showinfo=0&amp;controls=1&amp;fs=1&amp;autoplay="0" frameborder="0" allowfullscreen></iframe>';
    if (i==0) {
      firstOutput += '<div class="first">';
      firstOutput += '<h2>' + entriesTitle + '</h2>';
      firstOutput += '<iframe src="http://www.youtube.com/embed/'+entriesID+'?wmode=transparent&amp;HD=0&amp;rel=0&amp;showinfo=0&amp;controls=1&amp;autoplay="0" frameborder="0" allowfullscreen></iframe>';
      firstOutput += '<p>' + entriesDescription + '</p>';
      firstOutput += '</div>';
      document.getElementById('myplayer').innerHTML=firstOutput;
    }
  }
  document.getElementById('videolist').innerHTML = myOutput;
  myOutput +='</ul>';
}
</script>

<div id="videogroup">
  <div id="myplayer"></div>
  <div id="videolist"></div>
</div>

<script type="text/javascript" src="http://gdata.youtube.com/feeds/users/lynda/uploads?alt=json-in-script&callback=listVideos&max-results=6&category=Villalobos"></script>

This gist lets you read a YouTube stream of video from a channel and place it on your site as a series of playable thumbnails.

You can include it in a sidebar widget in WordPress pretty easily. Just copy the code, then add a text widget in WordPress and paste the code. You might have to tweak your CSS a bit.

For right now, it will load the latest videos from the Lynda.com com channel that are tagged with my last name "Villalobos". To customize, simply change the name of the channel (right now lynda), how many videos you want (results=). The category is optional. One note is that the category will also work with tags. So if you're looking to view by tag or category, just feed the name under the category id.

Has anyone tried out this Youmax plugin .. shows video feeds for any channel or playlist with subscriptions

http://www.codehandling.com/2015/01/youmax-40-bring-youtube-to-your-users.html

If anyone prefer a PHP solution, here's what I did to display YouTube channel on a webpage.

1. Get your YouTube API Key.

2. Use the following code to get the YouTube channel's list of videos.

    $json_link="https://www.googleapis.com/youtube/v3/search?key=YOUR_API_KEY" .
    				"&channelId=YOUR_CHANNEL_ID&part=snippet,id&order=date" .
    				"&maxResults=50";
    
    $json = file_get_contents($this->json_link);
    $obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);						
    
    foreach($obj['items'] as $post){
    
    	$id = isset($post['id']['videoId']) ? $post['id']['videoId'] : "";
    	$published_at = isset($post['snippet']['publishedAt']) ? $post['snippet']['publishedAt'] : "";
    	$title = isset($post['snippet']['title']) ? $post['snippet']['title'] : "";
    	$description = isset($post['snippet']['description']) ? $post['snippet']['description'] : "";
    	$thumbnail = "https://i.ytimg.com/vi/{$id}/maxresdefault.jpg";
    	
    	echo "<div>
    			<div><img src='{$thumbnail}' /></div>
    			<div>{$title}</div>
    			<div>{$description}</div>
    		</div>";
    }

Here's how to get your YouTube Channel ID:

1. Go to your YouTube channel.
2. On the browser address bar, you will see something like this: https://www.youtube.com/channel/UCsmyfPVdui2ZjOQSdM6CHWA
3. Your YouTube channel ID is the text after /channel/. In our example above, the YouTube channel ID is UCsmyfPVdui2ZjOQSdM6CHWA

Another good solution is to use a website plugin where you don't have to maintain any code. WATCH THIS VIDEO

What's next? You can Try the plugin now, view a live demo here or continue reading below.

1. Create a free SociableKIT account here and login. Video Tutorial

2. Once logged in, click “+ Create SociableKIT Solution” button.

3. On the pop up, name your custom YouTube channel videos feed.

4. On the drop-down, select “YouTube Channel Videos” option.

5. Enter your YouTube channel ID or custom name.

6. Click the “Proceed” button. This will show you the customization options.

7. Click the “Embed On Website” button located on the upper-right corner of the screen.

8. On the pop up, copy the embed code by clicking the “Copy Code” button.

9. Paste the embed code on your website.

View live demos and learn more here.

Seems this doesn't work anymore. How would you go about retrieving all videos for a channel / user using JavaScript now?

If anyone prefer a PHP solution, here's what I did to display YouTube channel on a webpage.

1. Get your [YouTube API Key](https://console.developers.google.com/).

2. Use the following code to get the YouTube channel's list of videos.

    $json_link="https://www.googleapis.com/youtube/v3/search?key=YOUR_API_KEY" .
    				"&channelId=YOUR_CHANNEL_ID&part=snippet,id&order=date" .
    				"&maxResults=50";
    
    $json = file_get_contents($this->json_link);
    $obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);						
    
    foreach($obj['items'] as $post){
    
    	$id = isset($post['id']['videoId']) ? $post['id']['videoId'] : "";
    	$published_at = isset($post['snippet']['publishedAt']) ? $post['snippet']['publishedAt'] : "";
    	$title = isset($post['snippet']['title']) ? $post['snippet']['title'] : "";
    	$description = isset($post['snippet']['description']) ? $post['snippet']['description'] : "";
    	$thumbnail = "https://i.ytimg.com/vi/{$id}/maxresdefault.jpg";
    	
    	echo "<div>
    			<div><img src='{$thumbnail}' /></div>
    			<div>{$title}</div>
    			<div>{$description}</div>
    		</div>";
    }

Here's how to get your YouTube Channel ID:

1. Go to your YouTube channel.

2. On the browser address bar, you will see something like this: https://www.youtube.com/channel/UCsmyfPVdui2ZjOQSdM6CHWA

3. Your YouTube channel ID is the text after /channel/. In our example above, the YouTube channel ID is UCsmyfPVdui2ZjOQSdM6CHWA

Another good solution is to use a website plugin where you don't have to maintain any code. WATCH THIS VIDEO

What's next? You can Try the plugin now, view a live demo here or continue reading below.

1. Create a free [SociableKIT account here](https://www.sociablekit.com/free-access/) and login. [Video Tutorial](https://www.youtube.com/watch?v=yxcsUCKimAc)

2. Once logged in, click “+ Create SociableKIT Solution” button.

3. On the pop up, name your custom YouTube channel videos feed.

4. On the drop-down, select “YouTube Channel Videos” option.

5. Enter your YouTube channel ID or custom name.

6. Click the “Proceed” button. This will show you the customization options.

7. Click the “Embed On Website” button located on the upper-right corner of the screen.

8. On the pop up, copy the embed code by clicking the “Copy Code” button.

9. Paste the embed code on your website.

View live demos and learn more here.

Your answer is surprisingly similar to an advertisement
Oh... wait... it's an advertisement!!