Fubra Video (FuTube) – An alternative YouTube player

Fubra Video Player (FuTube)

An alternative flash based YouTube player

The Fubra Video (FuTube) Player is a free to use flv video player that simplifies the default user interface of YouTube videos.

Using the YouTube Chromeless Player and JavaScript Player API we have created our own custimisable player which is available for anyone to include on their own site.

[futube video="gE1KGHUb9zw" width="390" height="290"]

Embedding Methods

FuTube can be embedded a number of different methods. In the examples below we will assume that we want to replace the following with a video:

[html]<div id="example_video">Replace this with FuTube video</div>[/html]

Embed using jQuery

The easiest way to embed videos using the FuTube video player is to include our jQuery plugin, this will handle all the additional includes and allow you to easily adjust the player settings.

[html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://video.fubra.com/js/jquery.futube.js"></script>
<script type="text/javascript">
$(function() {
$(‘#example_video’).futube({video: "gE1KGHUb9zw"});
});
</script>[/html]

Options (Object)

align (String) default: “left”
Position of the intro text (“left”, “center” or “right”).
author (String, Boolean) default: “by Fubra”
The sub title shown on the video intro. Set to false to hide completely.
bgcolor (String) default: “auto”
Set background color of the video in HEX format, e.g. “#FF0000″.
color (String, Boolean) default: false
Set the color used for the seeker bar, icons etc. in HEX format, e.g. “#00FF00″.
height (Number) default: 300
Height (in pixels) of the embedded movie.
hd (Boolean) default: true
View the movie in High Definition mode.
image (String, Boolean) default: false
URL of the image to use on the intro screen, if false then the YouTube’s screenshot is used.
title (String) default: “FuTube”
The main title displayed on the intro page.
video (String, Boolean) default: false
ID of the video to embed from YouTube, e.g. “sLgmmDN6zyc”. Required.
width (Number) default: 400
Width (in pixels) of the embedded movie.

These options can be passed in as additional arguments by appending them to the options object.

For example, suppose we wanted to add a title and author to our video we could add them in the following manor:
[javascript]$(function() {
$(‘#example_video’).futube({
video: "gE1KGHUb9zw",
title: "This is my video",
author: "by whoever"
});
});[/javascript]

Embedding into WordPress

We have also put together a WordPress plug-inFuTube Video Player – enabling you to insert standard YouTube Videos and well as those using the FuTube interface.

Once you have installed and activated the plug-in you can add Fubra Videos to your blog post using the following short tag:

[html][futube video="gE1KGHUb9zw"][/html]

A fully customised player can be included by defining any of the available options:

[html][futube video="gE1KGHUb9zw" align="left" author="by Fubra Limited" bgcolor="#FFFFFF" color="#336699" hd="true" height="300" image="/path/to/image.jpg" title="Example Video" width="400"][/html]

To included videos with the standard user interface use:

[html][youtube video="gE1KGHUb9zw"][/html]

The only additional options available for YouTube videos are width and height.

Embed using SWFObject

The second menthod is to use the SWFObject embedding method directly. You will have to manually include swfobject.js and controls.futube.js before embedding any videos.

[html]<script type="text/javascript" src="http://video.fubra.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://video.fubra.com/js/controls.futube.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"http://video.fubra.com/skins/default.swf?nocache=" + new Date().getTime(),
"example_video",
"460", "260", "9", null,
{ video: "gE1KGHUb9zw", title: "Skiing to the office", author: "by FubraFilm" },
{ menu: "false", allowScriptAccess: "always", allowFullScreen: "true", wmode: "window", bgcolor: "#FFFFFF" },
{ name: "example_video" }
);
</script>[/html]

Embed using the Object Tag

The most basic form requires only one external JavaScript file – controls.futube.js – to be included. Options must be passed as part of the flashvars query string.

[html]<script type="text/javascript" src="http://video.fubra.com/js/controls.futube.js"></script>
<object id="example_video" type="application/x-shockwave-flash" data="http://video.fubra.com/skins/default.swf" width="400" height="300">
<param name="menu" value="false">
<param name="allowScriptAccess" value="always">
<param name="scale" value="noscale">
<param name="allowFullScreen" value="true">
<param name="wmode" value="window">
<param name="flashvars" value="video=gE1KGHUb9zw&amp;title=Skiing%20to%20the%20office&amp;author=by%20FubraFilm&amp;id=example_video">
<param name="movie" value="http://video.fubra.com/skins/default.swf">
</object>[/html]

Note: You must have Flash Player 8 or higher installed to view the FuTube player.

Attribution Notice

When integrating the API into your website, you should feature the Powered by YouTube badge on any web page where the YouTube API has a presence and next to where the implementation appears in the page UI.

Powered By YouTube badges are available for download & use (right-click and download). All Powered by YouTube badges on web pages must be clickable and link back to http://www.youtube.com.