Using jTube – Video and Thumbnail
This is the final post of the series that has so far covered the very basics of showing a list of video titles, to paging of the list using jTube. In this post I will discuss how to embed a video using jTubeEmbed which comes with the jTube jQuery plugin, also how to show the video thumbnail provided by YouTube. To show these features off I will modify where we left off in the paging tutorial and show the video for the first entry of the page then show the thumbnail for the other videos on the page.
To show the video only on the first video we need to modify the each loop to tell us where we are in the loop. Simply add `index` as the first parameter received.
12 | $(videos).each(function(index) { |
Now that we know what position we are in the loop, we can check if we are on the first video. Simply add an if statement that checks if the index is 0 (first). If we are on the first, embed the video, otherwise show the link with the title and length. To embed the video we will use the jTubeEmbed function. Only thing it requires is the video url. That is given with the key `video`. In this tutorial we can access that with `this.video`. If you choose not to pass the width and height option, the embed defaults to 290x250px. In our demo we will pass in the dimensions 200x172px so they fit snug in our page. These options are passed in similar to jTube but they go in as a second parameter. We should also show the video title below the video, but not link it since we already have the video.
13 14 15 16 17 18 19 20 21 22 23 24 | videoHTML = '<li>'; if(index == 0) { videoHTML += $.jTubeEmbed(this.video, {width: 200, height: 172}); videoHTML += this.title; } else { videoHTML += '<a href="'+this.link+'" target="_blank">'; videoHTML += this.title; videoHTML += '</a> - '+this.length; } videoHTML += '</li>'; |
Now that we have the video showing up lets add the thumbnail. Each video that jTube returns we have a url for the thumbnail, accessible with the key `thumbnail`. This will return the image url which you can put as the source in your img tag. To not overflow the page with large thumbnails, also set the width to 200px to match the video and height to 150px to keep the aspect ratio.
19 20 21 | videoHTML += '<a href="'+this.link+'" target="_blank">'; videoHTML += '<img src="'+this.thumbnail+'" width="200" height="150"><br>'; videoHTML += this.title; |
That should sum it up for this series of jTube tutorials. I have now covered getting users uploaded videos, success function, error function, paging, limit number of videos per page, videos from YouTube feeds, embed video using jTubeEmbed, and thumbnails.
Next series will cover user feeds including subscriptions and playlists. Including getting the videos from those playlists.
If you have any request for help or tutorials either leave a comment or submit a comment.
Complete Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <script type="text/javascript"> var currentPage = 1; var options = { feed: 'top_rated', limit: 12, page: currentPage, success: function(videos, numberPages) { $('#myVideos').html(''); $('#currentPage').html(currentPage); $('#numberPages').html(numberPages); $(videos).each(function(index) { videoHTML = '<li>'; if(index == 0) { videoHTML += $.jTubeEmbed(this.video, {width: 200, height: 172}); videoHTML += this.title; } else { videoHTML += '<a href="'+this.link+'" target="_blank">'; videoHTML += '<img src="'+this.thumbnail+'" width="200" height="150"><br>'; videoHTML += this.title; videoHTML += '</a> - '+this.length; } videoHTML += '</li>'; $('#myVideos').append(videoHTML); }); //Back if(currentPage != 1) { $('#pageBack').removeClass('disabled').unbind('click').click(function(event) { currentPage = currentPage - 1; options.page = currentPage; $.jTube(options); event.preventDefault(); }); } else { $('#pageBack').addClass('disabled').unbind('click').click(empty); } //Next if(currentPage < numberPages) { $('#pageNext').removeClass('disabled').unbind('click').click(function(event) { currentPage = currentPage + 1; options.page = currentPage; $.jTube(options); event.preventDefault(); }); } else { $('#pageNext').addClass('disabled').unbind('click').click(empty); } }, error: function(error) { $('#myVideos').append('<li class="error">'+error+'</li>'); } }; var empty = function(event) {event.preventDefault();}; $("#pageBack, #pageNext").click(empty); $.jTube(options); </script> <ul id="myVideos"></ul> <a href="" id="pageBack" class="disabled">Back</a> - Page <span id="currentPage">1</span> of <span id="numberPages">1</span> - <a href="" id="pageNext" class="disabled">Next</a> |
[...] Using jTube – Video and Thumbnail | Defvayne23.com [...]
[...] Using jTube – Video and Thumbnail | Defvayne23.com [...]
That is just brilliant, thanks again. I was keen to pull in a playlist so I just entered playlist :'NUMBER' and it worked just fine. I also experimented with getting all the videos playing on the page and managed that by messing up the index code
Fantastic!
So you got it working as you wanted?
I certainly got it working by following your example and without any great expectations beforehand, I am more than happy.
I'll add it to a website over the next couple of days and send you the url.
Also as my wife teaches broadcast journalism students, I can imagine uploading their reports to YT and then creating a page like this.
That is just brilliant, thanks again. I was keen to pull in a playlist so I just entered playlist :'NUMBER' and it worked just fine. I also experimented with getting all the videos playing on the page and managed that by messing up the index code
Fantastic!
So you got it working as you wanted?
I certainly got it working by following your example and without any great expectations beforehand, I am more than happy.
I'll add it to a website over the next couple of days and send you the url.
Also as my wife teaches broadcast journalism students, I can imagine uploading their reports to YT and then creating a page like this.