YouTube

JS

var YouTube = {
		options: {
			tag: 'toyota_social',
			author: 'ToyotaItalia',
			items_per_page: 6,
			start_index:1
		},
		init: function(options) {
			this._setURL(options);

			return this;
		}, 
		_getURL: function() {
			return this.url;
		},
		_setURL: function(options) {
			this.options = $.extend({},this.options,options);
			//todo automatic params mapping
			this.url = "http://gdata.youtube.com/feeds/api/videos?category="+this.options.tag+"&author="+this.options.author+"&v=2&max-results="+this.options.items_per_page+"&start-index="+this.options.start_index+"&alt=jsonc&orderby=published&callback=?";
		},
		fetch: function(options) {
			
			if(options) {
				this._setURL(options);
			}
			
			var url = this._getURL();
			
			
			
			return $.ajax({
				  url: url,
				  dataType: "json",
				  error: function(xhr,obj,error) {
					  log(error);
				  }
			});
			
		}
} 

var yt = YouTube.init(),
    listRender = _.template($('#video_list'));	

$.when(YouTube.fetch()).then(function(obj){
	$el.html(listRender(obj))
})

Micro Tmpl

<script type="text/html" id="video_list">
  <% _.each(data.items, function(item){ %>
      <li>
        <figure>
            <img src="<%=item.thumbnail.hqDefault %>" alt="<%= item.title %>" />
            <span class="placeholder"><img src="img/common/placeholder.png" /></span>
            <figcaption class="main_video_description">
            <div class="main_video_description">
                <span class="main_video_title"><%= item.title %></span>
                <span class="main_video_text">
                    <%= item.description %>
                </span>
             </div>
             </figcaption>
        </figure>
      </li>
  <% }) %>
      
</script>