Youmax 2.0 - complete Youtube channel on your website - customize anything you want - Jquery plugin

This is the version 2 of our Youmax plugin!

New Features:
- you can customize width and height of the widget on your website.
- columns for the videos can be customized (Example: you can now have a 3-column layout for the videos displayed.)
- the widget itself is responsive; given a width (or %) for the widget, the inner contents will resize accordingly.
- video player can be opened in the widget itself or in a lightbox.
- a top featured video can be opened in the video player on load of the widget.
- subscribe on youtube opens in a new tab.
- parts of the plugin like header/tabs can be hidden as per requirement.

Basic features:
- displays your actual complete youtube channel on your website just like its shown on youtube.
- youmax plugin will display your channel uploads, playlists and a featured playlist that you may choose. 
- users can browse through your playlists and uploads and watch videos they like.


 Download Pack          








How to use:

The download pack contains the plugin file - youmax.js and the HTML file deployed in the demo youmax.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)


?
<script type="text/javascript">
 //youtube channel URL (mandatory) -----------------------------
 youTubeChannelURL = "http://www.youtube.com/user/apple";
  
 //optional parameter-----------------------------------------------
 youmaxDefaultTab = "featured";
 youmaxColumns = 3;
 youmaxWidgetWidth = 800;
 //youmaxWidgetHeight = 1000;
 showFeaturedVideoOnLoad = false;
 showVideoInLightbox = true;
</script>
prepareYoumax();

The description of all optional variables is shown below - 



youTubePlaylistURL
A playlist from youtube channel to display its videos in the featured tab of Youmax.

If this is not supplied the latest playlist in your youtube channel is displayed in the featured tab as the featured playlist.
youmaxDefaultTab
A default tab to be selected on load of Youmax. Accepted values can be “uploads” or “playlists” or “featured”.

If this is not supplied, the featured tab will be selected on load of Youmax.
youmaxColumns
The number of columns (for video thumbnails) to be displayed in the body of the widget.

If this is not supplied, a 2-column layout will be selected and displayed.
youmaxWidgetWidth
The width of the Youmax widget.

If this is not supplied, width of Youmax defaults to 640px.
youmaxWidgetHeight
The height of the Youmax widget. Ideally this value should not be supplied.

If this is not supplied, the Youmax widget takes the minimum height it needs to display all video thumbnails from you youtube cahnnel.
showFeaturedVideoOnLoad
Can be set to true/false. If set to true, the first video in your featured playlist will be auto loaded in the video player embedded in the Youmax widget.

If this is not supplied, the value defaults to false.
showVideoInLightbox
Can be set to true/false. If set to true, videos will open in a lightbox. If set to false, videos will open embedded in the Youmax widget.

If this is not supplied, the value defaults to false.

Other functionalities:

To hide the channel info header (black) of Youmax widget, add the below code in your css - 
?
#youmax-header{display:none !important;}

To hide the tabs of Youmax widget, add the below code in your css - 
?
#youmax-tabs{display:none !important;}

To specify the width of Youmax widget as a percentage(%), add the below code in your css - 
?
#youmax{width:100% !important;}

For any other specific requirement, just let me know and I will provide a hack! 

2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin youmax.js inside your head tag and you are done! 

?
<body>
  ...
  ...
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script src="./youmax.js"></script>
</body>

3. Create a container for your interface

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

?
<div id="youmax"></div>

Thanks!
Share on Google Plus

About Mohamed Ashik

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment