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;

  1. 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".

  2. 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.

Optional Callbacks

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

  1. 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.

  2. 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.

  3. 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.