Vimeo Popup Player Documentation

Vimeo - YouTube Combo Popup Player Documentation

This simple and convenient popup video player will display either VIMEO or YOUTUBE sourced videos. Use of this assumes you have either (or both) a Youtube and/or a Vimeo account. It will work with the basic Vimeo service however a number of custom configurations for the video are not available in this basic free Vimeo service. For production quality video you will have to get, at minimum, a VIMEO PLUS account (approx $90.00/year), which allows full customization of the video player, including removal of Vimeo branding, shares, likes, watch later etc. with various HD display options.

What makes this technology appealing is twofold;

The video player display appears as "popup" window, fired from simple links, which saves having to have one or more video player windows occupy page "real estate".
There is no need to create separate embed code for each video. Applications which aim to show multiple videos can be isolated on a single web page without requirement for any embed code from either Vimeo or Youtube.

Script Setup

This video combo option requires only one service script, which handles both the player set-up and its related styles. Add a this script file URL to HEAD section of your HTML page as...

<script type="text/javascript" src="Hosting website/video_combo_mins.js"></script>

Video Play Links

Once the above script is added to an HTML document Vimeo or YouTube clips can be displayed in a popup window from simple links as shown below. Script the video links in any HTML page as in these examples for either Vimeo or YouTube sources.

A sample link for Vimeo is...

<a href="javascript:PlayVimeo(vimeoID,'Video Title', width, 'position', shadowed, loop , startTime )>Link Text</a>

or a sample link for YouTube is...

<a href="javascript:PlayYoutube(youTubeID,'Video Title', width, 'position', shadowed, loop, startTime)>Link Text</a>

The examples above are shown as fired from a standard HTML anchor tag <a> but for advanced users or developers the links can be fired from any OnClick(function) method in any valid HTML container source (DIV, P, BUTTON, INPUT etc.). The "function" argument can be any JS function that contains the PlayVimeo(args) or PlayYoutube(function) options. See the source code for this page for Example 5 below. Multiple video links on a page are permitted. No embedded players are required.

NOTE: YouTube videos always display an active YouTube icon overlaid on the selected video. If this icon is selected and "clicked" by a viewer it will link directly to the YouTube website and automatically replace your HTML page with the same video displayed on the YouTube site. This can be a major disadvantage of using Youtube videos in any setting wherein you do not want the sequence of your HTML video presentations to be interupted by a jump to a new page. In these cases Vimeo is a better option because the player display options can be customized to prevent this unwanted behaviour.

Link Script Argument Details

Note: Optional values indicated below are simply omitted from the function call.

The vimeoID is a unique 9 digit number that can be obtained from the URL for the video that appears on your Vimeo site. (Required for Vimeo)
The youtubeID is a unique alphanumeric string that can be obtained from the URL for the video that appears on your Youtube site. (Required for YouTube)
The video title can be any text that you wish to appear in the header area of the player. The title length should be short enough to fit within the title area based on the player width you select. (Optional - A default title will appear if omitted)
The width value is any integer value for width between minimum of 360 and maximum of 900. (Optional - Defaults to 600px wide if omitted) The video height is automatically calculated for a 16 x 9 aspect ratio.
The position value is any of "center", "left" or "right", which are rendered relative to the browser viewport. (Optional - Default is "center" if omitted.)
The shadowed option displays a gray outline shadow on right-bottom of the player for a more 3D display style. Value is either true or false. (Optional - Default is false if omitted.)
The loop value (keeps repeating the video play on completion) is either true or false. Loop value is automatically set to false if a start time is specified.(Optional - Default is false if omitted.)
The startTime for when a video commences play. (Optional - Default starts video at beginning if omitted). Values passed must be enclosed in quotes. Time formats are :

For VIMEO sourced videos the start time format is HH:MM:SS (hours:minutes:seconds).
For YOUTUBE sourced videos the start time format is total SECONDS only. (Hours, minutes all must be pre-converted to a single value in seconds.)

Optional Callbacks

The host page can include three optional JS functions that are called back from the player as follows;

PlayerStarted(videoID,videoTitle) - If present on host page this function fires when any video is launched, and provides the video ID and video title as incoming arguments.

This function can be used to override PlayVideo settings to display a playlist in the popup viewer (only available for Vimeo playlists). Click here for source code example.
PlayerStopped(videoID,videoTitle) - If present on host page this function fires when any video is stopped, and provides the video ID and video title as incoming arguments.
StopVideoPlayer() - This built in function can be called from the host page to stop a player independant of the player CLOSE button.

Again, these host page functions are optional and would only be used if you wanted to have some action occur after a video has been started or closed by a user.

Example Video Links

Vimeo Plus Example 1 (Center at 800px wide, shadowed. This Vimeo Plus option allows you to remove branding, shares, likes etc.)

Vimeo Plus Example 2 (Right at 360px wide, shadowed and looped.)

Vimeo Plus Example 3 (Left at 600px wide, shadowed with start time set at 1:10 firing status messages on start and finish.)

Vimeo Plus Example 4 (Only the VimeoID argument is passed. Shows defaults for all optional parameters)

(Fired from OnClick event in a button tag invoking a simple Javascript function in source called Demo())

Youtube Example 1 (Center at 500px wide with start time set at 90 seconds)

For more information on acquiring this Vimeo/Youtube Popup Player script please click here to contact us.

View source for this page for script and link examples.