4.1: Embeddng: Modifying the video player without writing code

The video player built into 23 Visual Platform is quite powerful: its look and feel can be customized extensively, and it can host both videos and photo slideshows when it is embedded into 3rd party sites. If your project has very specific needs you will even be able to re-program the player in Adobe Flash or Adobe Flex. This guide provides information on how to customize the display of your videos.

Embedding the video player into other sites

The video player can be included in a variety of different contexts and can include multiple videos and photos, depending on how it is used.

Embed one video

Embedding just one video clip is easy. You'll find the needed code available directly within 23 Video (or other Visual Platform products). Navigate to the video player page and copy the HTML embed code into your own page. The code will look similar to this:

<embed width="580" height="435" src="http://videos.example.com/v.swf"
   allowfullscreen="true" allowscriptaccess="always" flashvars="photo_id=12345"/>

The width and height attributes specify the size of the video player window, and the video clip is automatically scaled to match the size. The flashvars attribute specifies which video to load.

Embedding multiple videos or photos at once

Often you'll want to include a number of video clips into one page and let visitors browse through the clips. This can be done by organizing the videos (or photos) into an album or by tagging them.

When you've organized your selection of content, it can be included using the album_id and tag parameters in the flashvars attribute.

For albums:

<embed width="400" height="300" src="http://videos.example.com/v.swf"
   allowfullscreen="true" allowscriptaccess="always" flashvars="album_id=9753"/>

... and for tags:

<embed width="400" height="300" src="http://videos.example.com/v.swf"
   allowfullscreen="true" allowscriptaccess="always" flashvars="tag=summer"/>

Customizing the player

The look and feel of the video player can be changed under Presentation in your Visual Platform product. Changing the video player settings will change the display both on your Visual Platform site and when embedding the player elsewhere.

Change the player's looks when embedding

If you need to change the look of the player in a specific context, this can be achieved by altering the embed code. This piece of HTML, for example, will play all videos tagged "summer" on a white background with no tray and no logo:

<embed width="400" height="300" src="http://videos.example.com/v.swf"
 allowfullscreen="true" allowscriptaccess="always"
 flashvars="tag=summer&backgroundColor=white&showLogo=0&showTray=0"/>

Another example plays one specific video − but shows descriptions in a large, black Georgia font on a white tray:

<embed width="400" height="300" src="http://videos.example.com/v.swf"
 allowfullscreen="true" allowscriptaccess="always"
 flashvars="photo_id=12345&trayBackgroundColor=white&trayTextColor=black&trayFont=Georgia&trayTitleFontSize=16"/>

More real-life examples...

Parameters allowed in flashvars are:

Parameter	Allowed values
photo_id	Integer
album_id	Integer
video_p	Integer (0 or 1)
video_encoded_p	Integer (0 or 1)
tag	String
backgroundColor	Color
trayBackgroundColor	Color
trayTextColor	Color
trayFont	Font family list
trayTitleFontSize	Integer
trayTitleFontWeight	normal, bold
trayContentFontSize	Integer
trayContentFontWeight	normal, bold
trayAlpha	Float between 0 and 1
showTray	0 or 1
showDescriptions	0 or 1
autoPlay	0 or 1
loop	0 or 1
playHD	0 or 1
logoSource	Url
showLogo	0 or 1
logoPosition	'top left', 'top right', 'bottom right', 'bottom left'
logoAlpha	Float between 0 and 1
logoWidth	Integer
logoHeight	Integer
showShare	0 or 1
showBigPlay	0 or 1
browseMode	0 or 1
recommendationHeadline	(string)
recommendationMethod	'channel-popular', 'channel-new', 'site-popular', 'site-new', or 'similar'

Example: Run video clips on a loop on a big screen

The standard video player is ideal for blowing up onto a big screen to display video clips from your site running on a loop. Using the parameters loop and playHD this is easily achievable.

<embed width="400" height="300" src="http://videos.example.com/v.swf"
 allowfullscreen="true" allowscriptaccess="always" flashvars="autoPlay=1&loop=1&playHD=1"/>

In this example, all videos on the site is played in HD quality and repeated on a loop. Every time the loop starts over, the playlist is reloaded so you can upload new clips and have them displayed in the player without needing to manually reload anything.