Is there a way to change YouTube player skin?

Many of you have tried embedding YouTube video in webpage using EMBED tag. It’s very easy. Just copy the code and paste it in webpage, it will start streaming video. You may think, what’s new here? Yes, you are right there is nothing tricky here. Wait for a while.

Check the second scenario. Let say you want to steam any random video (.flv) other than YouTube video. What options do you have? Either you can use built in flash video player with little customization to match look and feel with your website theme or you can use free open source flash video player (e.g. flowplayer) to stream your video. So, what’s exciting here? Nothing.

Now check the third scenario. Let say you want to steam video provided by YouTube, but want to change video skin to match look and feel with your website? What you will do? Is there any option available to change skin of YouTube player other than default skin?

Yes; it’s possible. You can choose “YouTube Custom Player” if you just want to change background color, name of the player and content of default YouTube player. Or you can user “YouTube Chromeless Player”. You can use either JavaScript APIs or Flash APIs to make your custom player.

See the demo here; cromeless player using JavaScript APIs.

I found some limitation in integrating this APIs
(1) YouTube has provided numerous functions to integrate. But it’s hard to control various events like play, pause, mute, un-mute etc. in design.
(2) The given example support embedding of only one video player at a time. What to do if you have more than one video on a webpage?

I have made a JavaScript class using JavaScript APIs which allows user to overcome both the listed issues.

You can download the class and example code here!

Also, check the demo here of what I have implemented.

If you find any difficulties using this class, please contact me.

Hope you will find this post helpful.

Use a CDN to improve your website's performance

"80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Rather than starting with the difficult task of redesigning your application architecture, it's better to first disperse your static content. This will achieves a bigger reduction in response times." - Steve Saunders

Performance, Scalability and Cost efficiency to end users are main key factors for any web application. CDN (content delivery network) is the solution to achieve it. A CDN can offer 100% availability, even with large power, network or hardware outages. Traditional CDNs focus on web acceleration. New CDNs have integrated media delivery services so they are optimized for live video streaming, high definition video and large asset delivery.

Why we need to use CDN?
The main point of the CDN is caching. So, it definitely helps in improving performance and scalability of a website.

When not to use a CDN?
- Whenever you’re working offline.
- When you can deliver faster than the CDN, and care about that. This might be the case when all users are close to the server.

Privacy and security concerns.
Using the CDN, you are trusting the CDN to faithfully serve contents and relying on no third-parties injecting funniness in between the CDN and your user’s browser. It's good to use a reliable CDN like "Google’s The AJAX Libraries API"

The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globally available access to a growing list of the most popular, open source JavaScript libraries including: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject and YUI

Try it in your web application to see performance improvement in your application.

Book Review: High Performance Web Sites - Steve Souders

High Performance Web Sites by Steve Souders is one of the most important books front end engineers should read to be able to develop a proper web sites. In 14 chapter, you will know 14 of the best tips to enhance the performance of your website. the author gives example by numbers and statistics about the top 10 websites on the internet. In each tip Steve tells the effect of applying this tip on the top 10 websites.

This book is short and definitely very good in term of contents. The subtitle is, "Essential Knowledge for Frontend Engineers." The book is a quick read compared to most technical books, and not just due to its relatively small size (168 pages), but also the writing style.

According to Joe (Developer of Firebug debugger and Mozilla's DOM Inspector) -
"If everyone would implement just 20% of Steve's guidelines, the Web would be a dramatically better place. Between this book and Steve's YSlow extension, there's really no excuse for having a sluggish web site anymore."

Each performance rule in the book is supported by specific examples, and code snippets are available on the book's companion web site. The rules include how to:
* Make Fewer HTTP Requests
* Use a Content Delivery Network
* Add an Expires Header
* Gzip Components
* Put Stylesheets at the Top
* Put Scripts at the Bottom
* Avoid CSS Expressions
* Make JavaScript and CSS External
* Reduce DNS Lookups
* Minify JavaScript
* Avoid Redirects
* Remove Duplicates Scripts
* Configure ETags
* Make Ajax Cacheable

Here I have shared a presentation by Steve Souders and Tenni Theurer on
"High Performance Web Sites"

A multi-user blog system in PHP - Bluetrait

Blog systems are now very popular and there are plenty of solutions to implement blogs.

"Bluetrait" allows the one or more users to login and post articles that are stored in a database. Currently it supports storing posts in MySQL and SQLite posts.

It supports post categories, comments, comment spam filtering, generating RSS feeds, trackback handling and plug-in extensions.

Download Here!

Ref: http://www.bluetrait.com

Get the contacts of friends of different e-mail providers and social networks - Open Inviter

Retrieving the contacts of users is often used by social networks and similar sites to get viral by attracting the users' friends.

"Open Inviter" is the solution. It can be use to get the contacts of friends of different e-mail providers and social networks.

It can access the Web services servers of different networks to retrieve the contacts of friends of a given user.

Each network is accessed by the means of plug-in classes. Some plug-ins support sending invitation messages to friends to be added to the user contacts.

Currently it comes with plug-ins that support many networks such as:

* AOL * GMail * GMX.net * Windows Live (Hotmail) * Katamail * Lycos * Mail.com * Mail.ru * Rambler.ru * Rediff * Yahoo! * Yandex * Facebook * Hi5 * LinkedIn * MySpace * Orkut * Twitter

Download Here!

Ref: http://openinviter.com