Custom YouTube Player

29 marzo 2011

I’m back with you after a long silence.
This time the project is very simple, but very useful and effective: a player for YouTube totally made with HTML + CSS + JavaScript, and easily customizable.
The system is based on the excellent tutorial by Martin Angelov (http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/). The players include the button play / pause, a clickable progress bar, duration time and elapsed time, mute button and volume control.

Usage
The plugin requires no configuration and is simple to install. Just include the latest version of jQuery and jQuery SWFObject plugin along with Custom YouTube Plugin javascript and css.

<link rel=”stylesheet” href=”../css/jquery.customYtPlayer.css” type=”text/css”>

<script src=”../js/jquery-1.5.min.js“></script>
<script type=”text/javascript” src=”../js/jquery.swfobject.1-1-1.min.js“></script>
<script type=”text/javascript” src=”../js/jquery.customYtPlayer.js“></script>

Finally, apply the plugin to any link where you entered the url to a youtube video using the jQuery selectors (for example “a.youtube”).

<script type=”text/javascript”>
$(function(){
$(“a.youtube”).customYtPlayer();
});

</script>

<a href=”http://www.youtube.com/watch?v=CD2LRROpph0″ style=”width: 480px;”></a>
or
<a href=”http://www.youtube.com/watch?v=zzfQwXEqYaI”></a>

And that’s it! The system will replace the link with the player.

By default, the plugin sets the width to 640px (the height is calculated based on the width), but you can easily set the width using css (eg by setting the attribute style = “width: 480px;”).

The plugin also accepts four events as options : onUnstarted, onPlay, OnPause, onEnd (I suggest you study the documentation on YouTube Javascript API to understand when such events occur).

The code is commented, and then, I think, will be easy to understand and modify it as needed.

Sample

REBECCA BLACK – FRIDAY
DEMO

Thanks

Thanks for the community that is helping the improvement of this little piece of code and, in particular, thanks to Martin Angelov (the code for this plugin is based largely on his tutorial). And of course a big thank you to my muse. Thanks Rebecca Black. Your creative effort has been like a lighthouse.

Compatibility
I test the script on few browser: IE6+, FF3+, Safari 4+ for Win and Google Chrome. Any warning about other browsers are appreciated.

Download
You can download script and example from here.

You are free to use the script and report me all bugs. As usual I apologize for my English and… Good luck!

Domenico Gigante

Custom Scroller Update (version 1.2)

15 dicembre 2009

Hello everybody,
in order to improve the script, I rewrited code, adding some usefull element.
Now is possible:

  • Call $(‘some_elem’).setCustomScroller() plugin to reset the scrollbars when you modified content through javascript (See DHTML example).
  • Set vertical (0/1) and horizontal (0/1) options to hide/show scrollbars.
  • Call $.anchorFix() to add support for anchor link inside scrollable elements (See Simple example).

I also had test the script on IE6 and adjust css to work in this browser.

There is only a bug in IE6/7. In those browsers text have a strange behaviour, like this:

Note how the image has expanded the lighter green div. However, nested block elements (such as our paragraph) do not expand to fill the newly available area in the expanded container div. But, if you have an horizontal scrollbar, text starts expanding when you scroll on the right and the content div height decreases. As a consequence the scroller not works properly.
I try to fix problem setting width of content div to maximum available (the image width); but text anyway not expand to fill area.
I hope someone could help me to solve this problem.

Thank you very much for your suggests and reports.
Let me know about bugs!

I’m available for explanation about use of script.

Good luck,

Domenico Gigante

Download customScroller 1.2

IMPORTANT UPDATE!
In order to remove any doubt about the term FREE and about license, I decided to release the script under MIT and GPL licenses. Thank you to Zachariah for his suggest.

Custom Window

1 dicembre 2009

Hello everyone,
I come to you with an other usefull plugin. It’s a easy customizeable, full optional, windows creator.

What could you do with it?
Custom Window have the following features:

  1. Multiple windows (like in a desktop application), opening on cascade
  2. All basic function: close, miximize, minimize, restore, resize and drag window
  3. Easy to customize with an external CSS file and some images (if you want)

And, as always, at a convenient price: free (for non-commercial use).

How to use it?
All that you need is:

  1. javascript files: jQuery 1.3.2+ and jquery.customWindow.js. As an option you could use jquery.corner.js plugin to add rounded corners on window head.
  2. CSS and image.
  3. Few lines of javascript. Something like below.

<script type=”text/javascript”>
$(function(){
var win = $.customWindow({
title: My first window,
onopen: function (cont, obj) {
cont.html(‘This is my first window’);
}
});
});
</script>

Nothing all? Only a little advise: in order to use Custom Window better, I suggest to set BODY height to 100% and overflow to hidden.

<style>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
</style>

What does it expect?
Custom Window setup not required anything as mandatory. The parameters are passed as an object:

  1. width and height (in pixel or fraction of browser window size)
  2. title (string in window head)
  3. three events (onopen, onclose, onresize)

What does it return?
Custon Window function return a javascript object with the following properties and methods:

  1. A reference to all html elements of window (container, head, status, icons and – obviously – content area).
  2. Four methods (close, minimize, maximize, restore).

Thanks
Thanks for the community that is helping the improvement of this little piece of code and, in particular, thanks to http://fromvega.com/scripts for drag effect.

Compatibility
I test the script on few browser: IE6-7, FF3, Safari 4 for Win and Google Chrome 3. Any warning about other browsers are appreciated.

License
Dual licensed under MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.

Download and Demo
You can download script and examples from here.
Online demo
Custom window in action

You are free to use the script and report me all bugs. I’m available for explanation about use of script.

Good luck!

Domenico Gigante

Custom Scroller

29 ottobre 2009

Important! See Custom Scroller Update (version 1.2).

Just an other jQuery plugin! Does anyone miss it?

Introduction
Many users, including myself, have at some point wanted to create a scrollable text area with a custom scrollbar; something that look to go with website.
For those cases, I have come up with a javascript solution based on jQuery, making it behave almost the same as (or better than) OS default scroll bars.
Custom Scroller have the following features:

  1. Vertical and orizzontal scrollbar
  2. Draggable cursor
  3. Resizeable on windows.onresize event
  4. Mouse-wheel and keyboard scroll
  5. Text selection aid (so people can text-select overflowed contents)
  6. Ajax support on loading contents
  7. Easy to customize with an external CSS file and some images (if you want)

The best is that you write your html like the way you are used to (except there are a few things you need to be careful about) and Custom Scroller handles the rest.
And last, but not the least, it’s free (for non-commercial use). See update about license from version 1.2.

Usage
How I sayed, Custom Scroller is very easy to use like all jQuery plugins. All that you need is in the package.

Javascript files
Custom Scroller come with four files: jQuery 1.3.2+ and jquery.customScroller.js (quite obviously). In addition it use jquery.mousewheel.js 3.0.2+ (by Brandon Aaron), that provides mouse-wheel event handler, and jquery.wresize.js 1.1+ (by Andrea Ercolino), that treats a difect in IE window.onresize event (fired multiple times per actual resize).

StyleSheet file and images
Every appearence is easy to customize through a css file: color, size, background and cursor. I use six images (four arrows and two bar placeholder), that you can change as you choose. I encourage you to have a look at the css file, in order to personalize the scrollbar.

Then, between your head tags, you would see somithing like this:

<link rel=”stylesheet” href=”../css/customScroller.css” type=”text/css”>
<script src=”../js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”../js/jquery.customScroller.js”></script>
<script type=”text/javascript” src=”../js/jquery.mousewheel.js”></script>
<script type=”text/javascript” src=”../js/jquery.wresize.js”></script>

To apply the script to DOM elements, you must add few lines in head, like this:

<script type=”text/javascript”>
$(function(){
$(“#test-1″).customScroller();
});
</script>

and an element (a div, probably) with id equal to “test-1″ in the Body.

<div id=”test-1″ speed=”4″> … </div>

The script use jQuery selectors, as you have understood. Then you can add more than one scrollable text area in the page.

Sample
In those pages you can go deep to the heart of the subject and learn more on the script capability.

  1. Simple example
  2. Resizable example
  3. Image example
  4. Ajax example
  5. Ajax menu example

Thanks
Thanks for the community that is helping the improvement of this little piece of code and, in particular, thanks to http://fromvega.com/scripts for drag effect.

Compatibility
I test the script on few browser: IE7, FF3, Safari 4 for Win and Google Chrome 3. Any warning about other browsers are appreciated.

Download
You can download script and examples from here.

You are free to use the script and report me all bugs. Beg your pardon for me english and… Good luck!

Domenico Gigante