For an application we are developing at the moment for our company, I needed an integrated player for youtube movies. Condition was however, that it could run in an Extjs version 3.2 panel (or window). I started to look on internet (where else?), for I thought that this certainly must have tried once. I was a bit surprised that there’s no standard widget for this in Extjs. Read how easy it is to use in your own applications. I will stick as much as possible to the integration, skipping explanations on why it is working, for we want to see movies, don’t we?

Why this update?

I have updated this article because version 3.2 of Extjs is official and the developer of this Youtube extension Thorsten Suckow-Homberg updated the player and resolved some bugs. Thanks goes to him for this.

Google applications

The player uses the Google API for Youtube (Youtube API’s and Tools). A lot of documentation is available at the Google site, on how to use this API. Don’t worry, I won’t bother you with that. I will explain now how you can include the player successfully into your own applications.

The files and also the demo are based on the original extension of Thorsten Suckow-Homberg, so we grant him all the credits he deserves (Extjs Ext.ux.YoutubePlayer). Thanks again for the last modifications.

I have to say that player just works fine, but possibly can do much more, because all the possibilities of the API have not been explored yet. I am open for any useful suggestions.

Install

The supplied demo is starting a player in an Ext.Window, but you can also assign the player to a panel. Please let me know, if you would like to see me write a post on this.

Location of the Ext files

Make sure that downloaded code in the right relation with extjs (ext-3.2 in the sample shown). The core files of Extjs are not part of downloads (I have included a link to the Extjs download pages).

• Make sure that both extensions (ux) are also in the proper relation to your index.php or whatever file you are using to declare these files. I have called the directory “extensions”, but it can also be called “ux”, as long as the system can find it back at runtime.
• The with the demo delivered index.php plays a movie of the fantastic band Gentle Giant in an Ext.Window. You can modify this to your own purpose.
• Attention please: all files mentioned are in lowercase. This is because I experienced problems after transferring the files to the webserver of my provider. Some files were not recognized at runtime, when camel-case was used in the file names.

Demo

A working demo is available at demo. This demo is running with Extjs 3.2.0. You can read a post on this matter here:: Post about small bugs in version 3.2.

Downloads

• Extjs core version 3.2.0: Link to download (3.2.0)
• Youtube player for version 3.2 (excluding extjs core file and the required modified ext-all-debug.js !!: download

Next time more CodeIgniter

In a next post I will write about how you can cooperate CodeIgniter with ExtJS in addressing the Youtube API and use the results in a “view” visualized by an ExtJS application.