Quantcast
Channel: Rating & Star Rating – Html Use
Viewing all articles
Browse latest Browse all 10

Youtubars – Display Youtube user feed

$
0
0

Download   Demo

This jquery plugin Youtubars  is Display Youtube user feed with jQuery and Handlebars Template.

1. INCLUDE JS FILES

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script type="text/javascript" src="src/youtube.min.js"></script>

2. HTML

<div id="container" class="clearfix"><img class="loading" src="img/ajax-loader.gif" alt="Loading"></div>

<script id="youtube-template" type="text/x-handlebars-template">
    {{#each this}}
	<div class="video clearfix">
		<div class="thumb"><a target="_blank" title="{{title}}" href="{{link}}"><img title="{{title}}" alt="{{title}}" src="{{image}}"></a><span>{{duration}}</span></div>
		<div class="video-content">
			<h2><a target="_blank" title="{{title}}" href="{{link}}">{{title}}</a></h2>
			<p class="date"><strong>Published: </strong>{{published}}</p>
			<p class="views"><strong>Views: </strong>{{viewCount}}</p>
			{{#if description}}
			<p class="description">{{description}}</p>
			{{/if}}
		</div>
	</div>
    {{/each}}
</script>

3. JAVASCRIPT

Youtubars.init({
	template: $('#youtube-template').html(),
	container: $('#container'),
	username: 'googlechrome',
	count: 30
});

The post Youtubars – Display Youtube user feed appeared first on Html Use.


Viewing all articles
Browse latest Browse all 10

Trending Articles