Vimeo Play Vimeo videos directly within JW Player 7

The Vimeo JW Player plugin uses the AS3 API to show the Vimeo videos using JW Player 7.

This demonstrates a setup to play a video from Vimeo with a playlist of other videos. Additionally it fetches information about each video from the Vimeo API and shows some of the data provided.

The plugin works with manual playlists aswell in combination with the JW Player playlist javascript api.


  • Chrome player support with integration with other JW Player plugins.
  • Provides an event for obtaining data for the video to be used for customised features via the javascript API and Vimeo API.
  • Full playlist support provided by JW Player to work with other video provider types like http, rtmp and youtube.
  • Automatic management of the controlbar to hide / show the controls for the chrome player with other video types in a playlist.
  • Html5 API player for both desktop and mobile.
  • Ability to display Jwplayer controlbar for Plus and Pro accounts where the player can be customised to disabled the Vimeo controls.
  • Vimeo video markers features embedding and displaying markers produced within the video description content.

Known Issues

  • No official configurable chromeless player support, therefore all controlbar UI needs to be disabled.
  • All video UI customisations are provided by Plus and Pro only users for the owners of those videos if they choose to provide a chromeless interface.
  • No bitrate quality selection or HD selection support due to the lack of video quality level selection support or controlling HD access.
  • Not able to obtain volume value changes from the default UI therefore all volume settings to and from JW Player are disabled for the moment.
  • Due to this limitation of IOS preventing video playback until user interaction when going between the Html5 video and Html5 video within the iframe playback is required to be prevented until user interaction to click play.
  • JWPlayer 7 has removed the playlist list bar and moved it to the controlbar therefore cannot be displayed when the controlbar is hidden for the Vimeo chrome player the moment.

(Current Version 8.0.0)


  • JW Player 8 and above
License Options

(Version 8.0.0)

License Information

The Vimeo Plugin is a once off commercial license with updates and support to the Vimeo plugin only. JW Player related questions and support may be provided on their forums at

  • Single Domain License - Suitable for small to medium sites with updates and unlimited support included.
  • Multi Domain License - Suitable for larger sites and video platform sites with updates, feature requests and unlimited priority support included.
  • Single Domain Not For Profit License - Suitable for not for profit organisations.


With your purchase please provide your domains to be provided with your licensed plugin. New domains need to be requested manually for the moment.

Refund Policy:

Please try the demo before purchase or request for a 60 day site demo. Refunds will not be issued unless under some circumstances sorry for the inconvenience.


Contact for a site or local demo download.

List Of Examples


Example with vimeo playlists.

JW Player configuration

The clip object sets the Vimeo plugin to be the video's streaming provider and URL resolver:

function formatContent(text){
    if (text) {
        text = text.replace(
                var full_url = url;
                if (!full_url.match('^https?:\/\/')) {
                    full_url = 'http://' + full_url;
                return '' + url + '';
        ).replace(/(\r\n|\r|\n)/g, "
"); } return text; } function showInfo(data) { $('#tags-content').html(data.tags.join(",")); $('#description').html(formatContent(data.content)); $('#content-container').show(); } function showFlashInfo(data) { $('#tags-content').html(data.tags); $('#description').html(formatContent(data.description)); $('#content-container').show(); } (function(jwplayer) { var player = jwplayer("basic").setup({ width: 660, height: 350, playlist: [ { start: 30, file: "", type: "mp4", title: "Big Buck Bunny", author: "Blender Foundation", videoDuration: "9.56", image: "" }, { file: "", type: "mp4", title: "Elephants Dream", author: "Blender Foundation", videoDuration: "10.54", image: "" }, { file: "", type: "mp4", title: "Les chiens isolés", author: "CRCR", videoDuration: "6.32", image: "" }, { file: "", type: "mp4", title: "Junkspace", author: "CRCR", videoDuration: 0.55, image: "" }, { file: "", type: "mp4", title: "TODOR and PETRU", author: "CRCR", videoDuration: "2.45", image: "" }, { file: "", type: "mp4", title: "Red River Bay", author: "CRCR", videoDuration: "1.07", image: "" }, ], vimeo: { //not required enableApiData: true } }); player.on("ready",function() { player.on("vimeodata",function(data) { showInfo(data); }); }); })(window.jwplayer);


The configuration of the Vimeo provider plugin needs to be in a config object property `vimeo` like so:

vimeo: {

Here is a list of the configuration options:

property / datatype default description
false When enabled the video data feed will be collected and video information will be returned via the onApiData event. This will collect information like statistics, thumbnails, portraits, tags, title, description etc.
The required developer oauth key to load the api. The oauth key is required and can be obtained by first logging into Vimeo and registering your application at
false For Plus and Pro accounts, users can control the player design and disable the default controls and display the JWPlayer controlbar.
The config for embedding properties.

Embed Config

property / datatype default description
Specify the color of the video controls. Defaults to 00adef. Make sure that you don’t include the #.
0 Show the title on the video. Defaults to 0.
0 Show the user's portrait on the video. Defaults to 0.
0 Show the user's byline on the video. Defaults to 0.

Configuration For The Vimeo Markers Plugin

property / datatype default description
Specify the markers container id or style selector to enable markers generation and display.
timecode-marker Specify the caption time link style. This is required to be the same as what is used in the html template.
false Enable displaying the original vimeo description with the processed chapter point times.
<dt>{timecode}</dt><dd><a href=\"#\" data-time=\"{start}\" class=\"timecode-marker\">{caption}</a></dd> The html template for generating the markers list with. Either the timecode or the caption can be specified as the chapter point link.
"<a href=\"#\" data-time=\"{time}\" class=\"timecode-marker\">{timecode}</a> The html template for processing the description with the chapter point links.

Vimeo Video Playlist Example

This example demonstrates using a playlist combination of Vimeo and normal html5 videos

(function(jwplayer) {

            width: "100%",
            aspectratio: "16:9",
            //preload: "none",
            autostart: false,
            playlist: [
                                    { file: "", type: "mp4",  title: "Big Buck Bunny", author: "Blender Foundation", videoDuration: "9.56",  image: "" },
                            sources: [
                                                                    { type: "webm", file: "//"},
                                                                    { type: "mp4", file: "//"},
                                                                    { type: "ogg", file: "//"}
                            title: "Elephants Dream - Mp4", author: "Blender Foundation", videoDuration: "10.54", image: ""

                                    { file: "", type: "mp4", title: "Les chiens isolés", author: "CRCR", videoDuration: "6.32", image: "" },


            vimeo: {



Vimeo Video With Markers Example

This example obtains the markers from the Vimeo video description and generates either a marker list or processed description to display with chapter point links enabled.

   <div id="markers-main" style="width:100%;">
     <div style="float:left;" style="width:640px;">
    	    <div id="markers"></div>
               <div id="markers-desc"/>
    <div id="markers-container" style="float:right; width: 300px;"></div>


(function(jwplayer) {

    var markersplayer = jwplayer("markers").setup({

            width: "50%",
            aspectratio: "16:9",
            autostart: false,

            playlist: [
                   { file: "", type: "mp4"}
            vimeo: {
                container: "#markers-container",
                chapters: true,
                html: true

    markersplayer.on("ready", function() {

        markersplayer.on("vimeomarkers",function(markers) {
            console.log("Found markers", markers);
        }).on("vimeohtmlmarkers",function(markers) {
                console.log("Html markers", markers.description);


Style for the markers list

         #markers-container {
               width: 300px;
               margin:0 0 0 0;


         #markers-container dt, #markers-container dd {
                       float: left;
                       margin: 0;
                       color: black;
                       font-size: 12px

         #markers-container dt {
                     margin-right: 1em;