after9design- Print + Web

Create a custom multiple player.

Get rid of the white margins of the YouTube video player.

If you have a website and you want to embed a YouTube player on a colored background at a particular size, you may find it rather frustrating. When pasting the code supplied by YouTube you will get a player at a specific size (probably too big for the div your pasting into) and when you grab the handles and size it in Dreamweaver, it will show up on your browser with awkward white margins that look awful on top of your page background color.

Here’s how to make the background of the player margins transparent and size the player to fit:

To create the player:

You must have a named playlist in YouTube of your selected videos.

To create a custom player: log in the your Youtube account, go to the command line of the browser and type in:

• http://www.youtube.com/my_players. Click on “create custom player”.This will take you to the creation page.

Select the options you want and click save player at the bottom. Copy the code provided.

Open your web page in Dreamweaver and paste the code in the div. You can apply css to the div later to position the player.

Sometimes you can get lucky and size the player by grabbing the handles (holding Shift for proportional) but if that doesn’t work, size the player by doing a little remedial math. Subtract the number of pixels you want less (or more if you want it bigger) from each of the width and hieght values in the code. They are in two places.

To make the background transparent:

Insert the wmode parameter for transparency in the  <embed> tag as follows:
<embed src=”http://www.youtube.com/cp/vjVQa1PpcFNCZ8iysbqWXB07SYnKnLO8POPlfBZ6OoA=” width=”546″ height=”302″ type=”application/x-shockwave-flash” wmode=”transparent”></embed>

Below is an example of how well the video will blend into your color scheme:

SlideShowPro is a photo and video sideshow player that can be embedded at any web site. SlideShowPro is distributed as a component for the Flash authoring application, as a web gallery extension for Adobe Lightroom, and in standalone form for embedding / customizing without the need for a third party application.

I have recently used this software to create an online website portfolio for a wonderful painting contractor, Wine Country Painters. I was really impressed with it’s flexibility, and with the simple addition of a Photoshop script, how easy it was to produce a professional on-line presentation.

You must understand the Flash interface to use this software. It is added as a component in the Flash program. Once you have installed the extension in flash, you can speed up the process of creating your photo image and thumbnail content by downloading the Photoshop script. Follow the instructions to place this script in your Photoshop presets/scripts folder. I found the on-line training to be generally good, except for the Photoshop script which came with little or no instructions. If you get the script- You Do Not have to create the folders (or the xml file) in the SSP Quick Start instructions, the script creates them for you!

To produce the slide show- Create a root folder for it, perhaps in the local directory of the website you are going to use it on. Collect your images in Photoshop in the order that you would like them to display. You don’t have to size them. Go to: File/Scripts/SSP Export Images. Click on it and you will be prompted to fill in a series of options. Put in the location of your folder, and the size of your images and thumbnails. Click when your done and watch the magic happen!

Next you will create a FLA in Flash and save it to the Slide Show root folder. When you drag the component to the stage, customize and publish, the images will all be there.