jQuery plugin Custom YouTube Channel Embed

Hi Guys,

I did this just for getting some hands on Youtube API. I thought its really impressive. But I also wanted to do something that do not need to authentication, thus I limited my Plugin to publicly available feeds.

You can get YouTube JSON documentation from here

https://developers.google.com/youtube/2.0/developers_guide_json

Alright lets get back to this plugin.

Motive of this plugin is to get list of videos from a custom channel and embed them in your web page. This plugin do not use swfObject but rather rely on current YouTube embed code that uses IFrame and Object embed.

Say you’ve got this Markup

and you want to display your videos inside the above container, with this plugin this is how you do it

Videos will be shown as thumbnails as shown below

jQuery youtube chanel embed plugin

I will give you links to demo in a bit. Lets check the plugin code first

The Plugin Code

[geshi lang=”javascript” nums=”1″ target=”_self” ]

The CSS

I have not done anything fancy with CSS styles and kept them to minimal. Its you to decide the look and feel but here is what I got for you.

[geshi lang=”css” nums=”1″ target=”_self” ]

The Options

  • mode: You can choose whether to list videos with full preview or just show tumbnails
    list | thumbnails, Default: list
  • videoWidth: Default video width
  • thumbnailWidth:Default thumbnail width, height is calculated automatically so you don’t have to maintain aspect ratio
  • showTitle: If you want to show title value must be true else false
    true | false , Default: true
  • maxResults: Number of videos you want to show
    Default: 6
  • startIndex: Say you have 10 video and want to display last 5 when sort by viewCount, then you will have startIndex value set to 6
    Default: 1
  • autoPlay: true | false – if you want to autoplay videos whenever possible
  • orderBy: you can sort your videos by  relevance | published | viewCount | rating
  • filterKeyword:”,  just in case you want to filter videos by keyword in a channel being embedded
  • channelUserName: this is the user name whose channel you are embedding.
    Default: jassiechahal
  • onlyHD:true | false – only include HD videos
  • allowFullScreen:true | false If you want to allow video to go full screen or not
  • format:Generally you will use value embed.  mobileH263 and mobileMP4 are there to use. format Map. embed:5  mobileH263:1 mobileMP4:3, Read more here 
    https://developers.google.com/youtube/2.0/reference#formatsp
  • useIncl:’frame’ // object || frame
    Whether you want to use IFrame or Object embed

 

Download it or Fork it

You can get the full source from Git. That include require prettyPhoto library too. Link is below

https://github.com/jaschahal/jcorgYoutubeUserChannelEmbed

Demo

Here are couple of example for this plugin. Videos are from my own channel

List Example

Thumbnail Example

Donations

Well I know that absolutely NO ONE cares its always worth asking just if you changed your mind this time around. There are so many improvements that can be made to this plugin and your contribution will help fund my time for future updates and features.

Buy me a bottle of Ice Tea 🙂

$ 190.00 raised.
Choose donation amount:

 

Advertisement

 

Credits

This plugin use prettyPhoto for one of its modes. My persoanl thanks to creator of prettyPhoto, this plugin has made it easier on what I wanted to achieve.

Bug Report

Absolutely no abuse will be tolerated. 🙂 Yeah I’ve been abused before before I touched feeling of an Acronis Fanboy. Anyway just leave your comment and let me know how whats wrong, we will work together on the issue. Please prefix BUG in your message.

 

I hope this helps.

Cheers!

Comments

  1. Hey, great plugin, worked straight out the box unlike so many. Only issue I am having is that no matter what option i pass on Flash objects are being rendered. I really need mobile friendly iframes. Even your demo pages are rendering flash.. Is this something I am doing or the plugin?

  2. Hey,
    I’m using your plugin and it works great, but I do have one question.
    Is it possible to not have the ‘related videos’, that youtube displays at the end of a video, appear when using this plugin?
    Thanks

  3. how to display complete videos from the User, here only can list 30 videos.

    • “”how to display complete videos from the User, here only can list 30 videos.””

      I have the same question how to display all the videos using this script please let me know thank you!

  4. Hey Jaspreet,

    I have done some more testing with this, and it appears to take some time for a video to pop up, also when you delete one it will take some time for it to be removed.. sometimes it can appear and disapear between page refreshes.

    I suspect this has something more to do with YouTube than the script though..

    Also I was wondering if there is someway of getting unlisted videos to show? I presume you would have to login..

    Thanks.

    • Hi Tistan,
      This plugin only works with publicly available videos. You will need more tightly integrated client to show private videos. I however can extend this script to display unlisted videos but that will ruin the fun of public channels.
      I can write an extension for this plugin though when I get some time to include unlisted videos, but in that case the unlisted video URLs will be required from the user of this plugin.
      Cheers!

  5. Hey, this is pretty sweet however it doesn’t work in IE.. any support/ideas? IE9 seems to work, however still get console errors.. IE7/8 nothing 🙁

    Erros from your example
    SCRIPT1028: Expected identifier, string or number
    jcorgYoutubeUserChannelEmbed.js, line 60 character 48

    SCRIPT438: Object doesn’t support property or method ‘jcorgYoutubeUserChannelEmbed’
    youtube-thumbnails.html, line 36 character 1

    Thanks

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.