Saturday, 2 February 2013

Yunero - Jquery plugin displays a video feed for YouTube channel uploads or custom playlist with subscription box


Youtube channels and playlists are the best ways to entertain your users and get more social by increasing your subscriptions. Now you can bring your Youtube uploads to your websites with "Yunero" - a new jQuery plugin that creates a widget on your website. Just specify your youtube channel URL and this widget will display the recent uploads from your channel. You may also specify your youtube playlist URL and video feeds from your playlist will be displayed. A subscription box for you is also shown to attract social people. Just include this plugin, specify your youtube URL and your video feed will be exposed on your website!






How to use:

The download pack contains the plugin file - yunero.min.js and the HTML file deployed in the demo yunero.html

1. Specify your Youtube URL

Enter you youtube channel URL in a piece of javascript as shown below. Ex: http://www.youtube.com/user/Apple)
Or if you have a playlist on youtube and wish to share its video feed, just specify your playlist Url. (Ex: http://www.youtube.com/playlist?list=PLZnxqowr6IKidF63-ybswuiO074g366-Y)
You may also customize the dimensions of your widget as required. The optional variable "yuneroVideoHeight" is used to set the height of your video frame.


2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin yunero.min.js before the end of your body tag and you are done!


3. Create a container for your interface

Add a div as shown below in you HTML. This div will contain the yunero widget and display your video feed.


Now as Dr.Sheldon Cooper would say "Bazinga!" :D
Video feeds on your webpage - done!
Posted by at

32 comments:

  1. yep i have heard about Yunero its a jQuery plugin that creates a widget on your website to display a video feed for YouTube channel uploads or custom playlist with subscription box. anyways thanks for sharing!

    Smith
    Quality Web Programmers

    ReplyDelete
    Replies

    1. hehe .. someone has to spread the news :D

      Delete

  2. Hi! This is a GREAT plugin and, indeed, I was looking for something like that for a while!

    I made some tests in my web site and everything works fine, but I have a suggest: make the Yunero responsive!

    I was intend to put Yunero runs in the sidebar of my blog, but, unfortunatelly, the look it's fine just in some resolutions... Would be great if the plugin works on a responsive base with responsive container and videos to adapt for every resolution to sites (as my) with RWD can use it!

    Regards!

    ReplyDelete
    Replies

    1. Sure .. working on it for version 2.0

      thanks for the tip!

      Delete

  3. Hey there will this work in Blogger? thanks

    ReplyDelete
    Replies

    1. yup.. works for me totally.

      but you may want to upload the plugin file "yunero.min.js" somewhere on the web to link it in your widget. So your srcipt tag will have the src attribute like -

      src="http://some_domain_path/yunero.min.js"

      Delete

  4. Very nice work..!!
    Thanks a lot..

    But please help me.
    i want to change the height of iframe (playing video) for my site..

    Please tell me how can i do it..??

    ReplyDelete
    Replies

    1. Thanks Gaurav ..

      Download this updated plugin file > https://www.box.com/s/qrd2de7al9nzq0os0o2x

      Use another optional variable in your js to set your video height >

      var yuneroVideoHeight = 200;

      Let me know if you need any help :)

      Delete

    2. Thanks Jake..
      and i had already fixed it according to requirement..

      Delete

    3. alright, well anyway .. good tip!

      Delete

  5. Hey man.. have you guys look at it on IE? I got some [object object] error.

    ReplyDelete
    Replies

    1. yea buddy, sorry about that .. IE 10+ is supported .. previous versions of IE dont allow you to implement such AJAX ...

      Maybe you can implement a workaround for IE with some hardcoded video URLs or playlists. :)

      Delete

  6. Doesn't seem to support any localization? Would you be able to add that?

    thanks

    ReplyDelete
    Replies

    1. Taking a closer look, I think I could live with it (as the google feed uses the youtube country/language settings, strangely, regardless of my page locale and even the browser default language). However, the 'Subscribe' button seems to be hardcoded there, can you please find a way to -- say -- retrieve its caption from same youtube service?

      Delete

    2. Hey buddy, glad you liked it!

      The subscribe button is not hardcoded, in the sense its specific to the channel URL you specify.. Even the subscriber box shows videos and subscriptions specific to your channel URL ..

      If you had something else in mind, please enlighten me on "retrieve its caption from same youtube service".

      Delete

  7. Hey mate, thanks for the script. It made my life easier after having troubles with others. Any chance of changing the layout to 3 thumbnails per row?

    ReplyDelete
    Replies

    1. well i can do that, but (for an estimate) may I know what is the width of the widget, that you plan on keeping ?

      The thumbnail size in each row will vary with that ..

      Delete

  8. Cheers for getting back to me so quick. The exact width is 600px

    ReplyDelete
    Replies

    1. May i suggest Youmax plugin .. for a 600px wide display ...

      Link - http://www.codehandling.com/2013/02/youmax-10-show-complete-youtube-channel.html

      Even this is a 2-column display .. but we will integrate the 3-column view by this weeknd!

      Delete

  9. Hi, sometime I get an error: [object object] also in the browsers Chrome and Firefox. Do you know how can I solve this issue ?

    ReplyDelete
    Replies

    1. Its working fine for me .. cant replicate your issue :(

      Delete

    2. If you share your link where this issue is happening, i might be able to look into it ...

      Delete

  10. i not get scroll in android and ios mobile application. So i can't able to see contents fully. Please give any idea to integrate it to my android and ios application

    ReplyDelete
    Replies

    1. lemme check it out .. will get back to u!

      Delete

    2. ok jake.. i will wait for your solution get back me soon

      thanks and regards

      Delete

    3. for now try setting the 'yuneroVideoHeight' to a larger value like 500/600 .. so that it will display more content ..

      I will provide a permanent fix in some time ..

      Also may i suggest try out our "Youmax 2.0" plugin -
      http://www.codehandling.com/2013/03/youmax-20-complete-youtube-channel-on.html

      Delete

  11. i like your plugin but i have a request. Is it possible for the videos selection to appear side by side instead of two per row? Is is also possible for the video to appear in a new windows because i have a limit on space?

    ReplyDelete
    Replies

    1. May i suggest you to the latest version of this plugin - "Youmax 2.0" -

      http://www.codehandling.com/2013/03/youmax-20-complete-youtube-channel-on.html

      Videos can be opened in a lightbox in Youmax2

      Also you can customize the rows, width, height etc in Youmax2..

      Please try that out and let me know if it works for you!

      Delete

  12. Awesome plugin.

    How could I make the first video load up from the get go? Currently the player area is blank until a feed thumbnail is clicked.

    ReplyDelete
    Replies

    1. Well, the player does not show up for me until any thumbnail is clicked ...

      Anyway,

      Please try out the latest version of the plugin -
      http://www.codehandling.com/2013/03/youmax-20-complete-youtube-channel-on.html

      You can try out all sorts of customization on it!

      Delete

  13. Hi I am trying to preview the live demo but i think its not working. Can someone help me with that. Thanks

    ReplyDelete
    Replies

    1. please try out the new version -
      http://www.codehandling.com/2013/02/youmax-10-show-complete-youtube-channel.html?showComment=1369722907571#c3478610877988084539

      Delete

Subscribe to: Post Comments (Atom)