hitautodestruct · August 29, 2015 14:01
diff --git a/related.html b/related.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
 <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
 </head>
 <body>
  <input type="text" id="related-id">
  <button id="get-more">Get related</button>
  <div id="results"></div>
 </body>
 </html>
diff --git a/related.js b/related.js
 jQuery(function($){
  
      var d = {
        part:'snippet',
        type:'video',
        relatedToVideoId:'K5KAc5CoCuk',
        key:'AIzaSyBxEaM5O2ImjXq0qcoJjSKBx5ZuUZ0s2lQ',
        maxResults: 10
      },
      $results = $('#results'),
      $moreBtn = $('#get-more'),
      $relatedId = $('#related-id'),
      list = [];
  
  
  var getRelated = function( relatedId ){
    
    d.relatedToVideoId = relatedId || $relatedId.val() || d.relatedToVideoId;
    
    $.getJSON('https://www.googleapis.com/youtube/v3/search', d, function(data){
      
      list = [];
      
      data.items.forEach(function(item){
      
        list.push('<img src="'+ item.snippet.thumbnails.default.url +'">'+item.snippet.title+' - <a href="#" class="js-get-related" data-id="'+ item.id.videoId +'">Get Related</a>');
      
      });
      
      $results.html(list.join('<br>')); 
    
    });
    
  };
  
  $moreBtn.click(function(){ getRelated(); });
  
  $results.on('click', '.js-get-related', function( e ){
    
    e.preventDefault();
    
    var id = $(this).data('id');
    
    getRelated(id);
    
  });
  
 });
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<input type="text" id="related-id">
	<button id="get-more">Get related</button>
	<div id="results"></div>
	</body>
	</html>
	jQuery(function($){

	var d = {
	part:'snippet',
	type:'video',
	relatedToVideoId:'K5KAc5CoCuk',
	key:'AIzaSyBxEaM5O2ImjXq0qcoJjSKBx5ZuUZ0s2lQ',
	maxResults: 10
	},
	$results = $('#results'),
	$moreBtn = $('#get-more'),
	$relatedId = $('#related-id'),
	list = [];


	var getRelated = function( relatedId ){

	d.relatedToVideoId = relatedId \|\| $relatedId.val() \|\| d.relatedToVideoId;

	$.getJSON('https://www.googleapis.com/youtube/v3/search', d, function(data){

	list = [];

	data.items.forEach(function(item){

	list.push('<img src="'+ item.snippet.thumbnails.default.url +'">'+item.snippet.title+' - <a href="#" class="js-get-related" data-id="'+ item.id.videoId +'">Get Related</a>');

	});

	$results.html(list.join('<br>'));

	});

	};

	$moreBtn.click(function(){ getRelated(); });

	$results.on('click', '.js-get-related', function( e ){

	e.preventDefault();

	var id = $(this).data('id');

	getRelated(id);

	});

	});