In this tutorial, I’ll show you how to make use of the new YouTube Chromeless player without any programming required, to create video content that fits in better with the style of your site, using video playlists, and even extra video effects like color cycling.
An Example
You’re probably used to the old blog standard YouTube embedded player, that looks like this:
But now you can have content embedded and running more directly in your site. Here’s an example that autoplays and repeats two different YouTube videos in sequence:
Notice that the new Chromeless style doesn’t really have a defined border, so it feels much more like content that’s integrated with your page, rather than just an embedded widget.
Goo-Tube have recently released Javascript and ActionScript 2.0 APIs (rather poorly excluding ActionScript 3.0) for this player, but all these require programming skills to use. I’ll show you a quick and easy way to make use of the player without any programming and embed it in your site in no time. You can either use an XML description of your video playlist, or else use my graphical editor.
XML-based Playlists
Here’s the XML playlist for the example video sequence above:
<Effect height="240" width="320" bgcolor="#ffffff"> <SlideShow autoAdvance="false" gap="0"> <YouTubeVideo videoId="FB2WUSvQStg"/> <YouTubeVideo videoId="fxu5CUPRU-U"/> </SlideShow> </Effect>
The root ‘Effect’ tag lets you define the width and height of your videos, and also the background colour to display during loading. The ‘Slideshow’ tag represents a container that displays each of it’s children in turn, then repeats. You can simply add or replace videos by adding or removing ‘YouTubeVideo’ children elements.
Here the children are the two YouTube videos with ids ‘FB2WUSvQStg’ and ‘FB2WUSvQStg’. The easiest way to find the YouTube id of the video you want is to look at the URL of the You Tube page for the video. The string of letters and numbers after “v=” in the URL is the id code. So for the URL:
http://www.youtube.com/watch?v=CCz1kmfqL7g
the id is ‘CCz1kmfqL7g’. Once you have the XML video playlist you want, simply surround with HTML code so that it looks like this:
<!--Video PLAYER: http://www.effectgenerator.com/ --> <script class="fxml" type="text/xml"> <Effect height="240" width="320" bgcolor="#ffffff"> <SlideShow autoAdvance="false" gap="0"> <YouTubeVideo videoId="FB2WUSvQStg"/> <YouTubeVideo videoId="fxu5CUPRU-U"/> </SlideShow> </Effect> </script><script src="http://www.effectgenerator.com/1.0.6/fxml.js" type="text/javascript"></script> <!-- ____ END Video PLAYER ___ -->
You can now put it directly in to your website. Since this uses JavaScript, it won’t work on sites like MySpace, but you copy the XML code into The Effect Generator (see below) to create Flash EMBED code for the video.
Using the GUI
You can also edit video sequences graphically inside my site The Effect Generator. Try right clicking on the video player above and selecting ‘edit’.
Start a new blank effect, and add the Slideshow component from the ‘Component Library’ on the right of the screen. Click the slideshow component and set it’s configuration not to auto advance (otherwise you will only see the first n seconds of each movie!). Then go to the ‘Public Media’ tab on the right and search for the YouTube videos you’d like to include.
Click ‘Publish’ and you can instantly add your video playlist to social networks, blogs, or get the Flash code to embed it.
Adding Lyrics and Other Effects
The XML description is actually an example of FXML - The Effect Generator’s internal language for describing Flash effects. This means that you can actually do a whole lot more than just sequence video using The Effect Generator. For example, you can add transitions between videos, text or graphic slides between them, overlay graphics or text, and more.
Here’s an example that uses the ‘Ticker’ component to move text across any video, adding lyrics for music. It also scales and rotates the video and adds a colour cycle effect. Right click on it to remix it into your own!
